首先将基本的DOM内容写出,再进行JS的相关操作

HTML与CSS样式内容写完后,我们来写js内容,如果要将js内容写在<head>中首先要运用window.onload = function().
第一步:获取HTML中的input内容;

其中先获取input标签中的所有元素,由于getElementByTagName返回的是一个数组,所有可通过下标来获取每个input中的对应元素。
第二步:点击部分
由于在获取元素中保存按钮变量名为inpBc,所有用inpBc进行点击触发

创建节点:

获取节点元素中的内容:

由于我们有一个功能是删除,所以将删除功能单独描写

在表格最后一个添加一个<a>标签;进行删除功能的操作以及点击删除今儿删除行,其中this.parentNode.parentNode是删除父节点的父节点,也就是说删除td和对应的tr
最后添加(追加)节点

效果图:

网友评论