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

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/空白诗007/article/detail/888706