javaScript实战项目之动态表格【文末附源码】_javascript 表格

whj

三、DOM实战-动态表格

===============================================================================

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实战-动态表格

姓名 年龄 成绩 职位 操作 刘浩 28 100 老师 王恒杰 21 99 组长 张西 20 88 学生

（3）CSS内容：

(4) JavaScript内容：

源代码在githee仓库：

程序员小王Gitee: https://gitee.com/wanghengjie563135/java-web-notes.git