width: 100px;
height: 100px;
background-color: red;
}
whj
===============================================================================
javascript实现动态删除、添加先捋一下思路:
要想实现动态效果,那就得使用增删节点的知识。
1、动态表格添加数据分析:
事件源头:发送事件的标签 提交的标签
事件属性:用户的操作 单击
事件监听:将用户输入的数据填充到表格中
1、用户输入的数据
2、填充到表格里
function addUser(){
//1、通过标签元素value属性值 获取用户输入内容
//2、将输入的内容封装成文本节点
//3、创建td标签对象
//4、将对应的文本节点放到td标签中
//5、创建tr文本节点
//6、将对应的td的标签放到tr标签中
//7、将tr放到表格中
}
2、动态表格删除数据分析:
事件源头:发送事件的标签 删除的按钮
事件属性:用户的操作 单击
事件监听:表格中的一行数据删除(tr)
1、获取删除哪一行数据
2、删除
function removeUser(){
//1、先获取事件源
var buttonSource=event.target;
//2.获取事件源的父标签(td)的父标签(tr)
var tr=buttonSource.parentNode.parentNode;
//3.获取tr标签的父标签(tbody或者是thead,为了避免找不到父标签使用parentNode)
var parentNode=tr.parentNode;
//4.删除这一行数据
parentNode.removeClild(tr);
}
3、代码实现动态删除、添加表格:
(1)代码结构
(2)HTML内容:
姓名:
年龄:
成绩:
职位:
DOM实战-动态表格