【Web APIs】JavaScript 节点操作 ⑩ ( 节点操作综合案例 - 动态生成表格案例 )

在 【Web APIs】JavaScript 节点操作 ① ( DOM 方式获取标签元素的弊端 | 节点简介 | DOM 节点概述 | 节点基本属性 - 节点类型、节点名称、节点值 ) 博客 中 , 介绍了 传统 DOM 方式获取节点的方式 及其 弊端 ( 调用繁琐、逻辑性差 ) , 并对 节点的基本属性 ( 节点类型、节点名称、节点值 ) 进行了简要介绍 ;

在 【Web APIs】JavaScript 节点操作 ② ( DOM 节点层级 | 利用节点间的层次关系获取元素 | 遍历节点层级 | 获取 父节点 / 子节点 代码示例 ) 博客 中 , 介绍了 利用 节点间的层次关系获取元素 , 通过 parentNode 获取父元素 , 通过 childNodes 获取所有类型节点 ( 包括文本节点 ) , 通过 children 获取子元素节点 , 并给出了示例代码 ;

在 【Web APIs】JavaScript 节点操作 ③ ( 子节点操作 | firstChild 属性 | firstElementChild 属性 | children[0] 属性 ) 博客 中 介绍 了 第一个子节点 和 最后一个子节点 的获取方式 ;

在 【Web APIs】JavaScript 节点操作 ④ ( 节点操作案例 - 下拉菜单案例 ) 博客中 , 开发了一个 节点操作的案例 , 控制下拉菜单 显示 / 隐藏 ;

在 【Web APIs】JavaScript 节点操作 ⑤ ( 操作兄弟节点 | 获取兄弟节点属性 | 自定义兼容函数 ) 博客中 , 介绍了 利用 previousSibling、nextSibling、previousElementSibling、nextElementSibling 属性 进行兄弟节点操作 ;

在 【Web APIs】JavaScript 节点操作 ⑥ ( 创建和添加节点 | 创建标签节点 | 创建文本节点 | 创建文档片段 | 添加节点 | 代码示例 ) 博客中 , 介绍如何 动态 创建和添加节点 ; 使用 document.createElement( tagName) 方法 创建 标签名为 tagName 的 HTML 标签元素 ; 使用 parent.appendChild(child) 方法 将元素添加到父容器末尾 , 使用 parent.insertBefore(newNode, referenceNode) 方法 在参考节点前插入新节点 ;

在 【Web APIs】JavaScript 节点操作 ⑦ ( 创建节点案例 | 网页评论功能 ) 博客中 , 讲解了 创建并添加节点 的 案例 , 简单演示了 网页评论功能 ;

在 【Web APIs】JavaScript 节点操作 ⑧ ( 删除节点 - removeChild 函数 | 删除节点 - 代码示例 | 删除网页评论案例 ) 博客中 , 介绍了 删除节点 操作 及 案例 ;

在 【Web APIs】JavaScript 节点操作 ⑨ ( 复制节点 | cloneNode 函数 | 代码示例 ) 博客 中 , 介绍 复制节点 操作 , 调用 cloneNode 函数 复制节点 , 默认 传入 false 参数为 节点浅拷贝 , 传入 true 参数为 节点深拷贝 ;

本篇博客 开发一个 节点操作综合案例 , 动态生成表格案例 ;

一、节点操作综合案例 - 动态生成表格案例

---

1、需求说明

实现如下功能 :

启动页面后 , 在自动运行的 JavaScript 脚本中 , 自动添加新的 表格项 ;

在每个 表格项 中 , 都有一个 删除 链接 , 点击 删除 链接 可以直接 删除 本条 表格项 ;

2、表格标签结构 - HTML 标签结构

动态生成的 表格 , 只定义 table 标签表格 , 和 thead 表格头部 标签 ,

创建的 表格 设置 cellspacing=“0” 属性 , 消除 单元格 之间的默认间距 ;

thead 表格头部中 定义 tr 表格行 , tr 表格行 中 定义 th 单元格 ;

表格 的 主体区域 暂时只定义 tbody 标签 , 之后 使用 JavaScript 脚本语言 动态填充数据行 ,

在 JavaScript 中 , 动态生成 tr 表格行 , 然后生成若干 th 单元格 填充到 tr 表格行 中 ;

代码示例 :

    <table cellspacing="0"><!-- 创建表格，cellspacing="0" 消除单元格默认间距 --><thead><!-- 表格头部区域（包含列标题） --><tr><!-- 表格行（table row） --><th>姓名</th><!-- 表头单元格（table header），加粗居中显示 --><th>科目</th><!-- 表头单元格 --><th>成绩</th><!-- 表头单元格 --><th>操作</th><!-- 表头单元格（用于操作按钮列） --></tr></thead><tbody><!-- 表格主体区域（将用JavaScript动态填充数据行） --><!-- JavaScript将在此处动态插入行：<tr><td>Tom</td><td>JavaScript</td><td>60</td><td><a>删除</a></td></tr>--></tbody></table>

3、CSS 样式

下面的 table 表格 , 表现样式如下 :

table 标签 元素样式 :

• 设置 500 像素宽度 width: 500px;
• 上下 100 像素外边距 , 左右自动实现水平居中 , margin: 100px auto;
• 合并相邻边框 : 使单元格边框合并为单一边框（消除双边框效果）, border-collapse: collapse;
• 表格内所有文本水平居中显示 , text-align: center;

        table {/* 表格整体样式 */width: 500px;/* 设置表格宽度为500像素 */margin: 100px auto;/* 设置表格外边距：上下100px，左右自动（实现水平居中） */border-collapse: collapse;/* 合并相邻边框：使单元格边框合并为单一边框（消除双边框效果） */text-align: center;/* 表格内所有文本水平居中显示 */}

设置 td 表头单元格 和 th 普通单元格 的样式 , 设置边框为 1 像素 深灰色 实线 , border: 1px solid black;

        td,th {/* 单元格通用样式（包括表头单元格和普通单元格） */border: 1px solid black;/* 设置单元格边框：1像素宽、实线、深灰色（#333） */}

设置 thead 表头 中的 tr 表格行 的样式 , 设置表头背景色为浅灰色 , 设置 单元格 高度为 40 像素 ;

        thead tr {/* 表头行（<thead>内的<tr>）特殊样式 */height: 40px;/* 固定表头行高度为40像素 */background-color: #ccc;/* 设置表头背景色为浅灰色（#ccc） */}

完整的 CSS 样式代码示例 :

    <style>table {/* 表格整体样式 */width: 500px;/* 设置表格宽度为500像素 */margin: 100px auto;/* 设置表格外边距：上下100px，左右自动（实现水平居中） */border-collapse: collapse;/* 合并相邻边框：使单元格边框合并为单一边框（消除双边框效果） */text-align: center;/* 表格内所有文本水平居中显示 */}td,th {/* 单元格通用样式（包括表头单元格和普通单元格） */border: 1px solid black;/* 设置单元格边框：1像素宽、实线、深灰色（#333） */}thead tr {/* 表头行（<thead>内的<tr>）特殊样式 */height: 40px;/* 固定表头行高度为40像素 */background-color: #ccc;/* 设置表头背景色为浅灰色（#ccc） */}</style>

4、数据对象 - JavaScript 对象

表格中的数据 放在一个 内置数组 对象中 , 参考 【JavaScript】内置对象 - 数组对象 ① ( 数组简介 | 数组创建 | 数组类型检测 ) 博客 ;

数组中的元素 是 JavaScript 对象 , 使用 字面量 创建对象 ; ( 参考 【JavaScript】对象 ① ( 对象概念 | 对象使用场景 | 使用字面量创建对象 | 空对象字面量 | 小括号 / 中括号 / 大括号 作用 ) ) 博客 ;

		{name: 'Tom', // 学生姓名subject: 'HTML', // 考试科目score: 60 // 考试成绩}

下面的 代码 是 JavaScript 使用 字面量 创建若干 对象 , 并放入数组中 ;

        // 1. 准备数据源：创建一个包含学生信息的数组，每个元素是一个对象var datas = [{name: 'Tom', // 学生姓名subject: 'HTML', // 考试科目score: 60 // 考试成绩}, {name: 'Jerry',subject: 'CSS',score: 95}, {name: 'Mickey',subject: 'JavaScript',score: 90}, {name: 'Donald',subject: 'JQuery',score: 95}];

5、节点操作 - 创建 表格节点 并插入 DOM 树

先获取 tbody 标签 , 之后创建的 tr 表格行 需要放入到 tbody 标签中 ;

        // 2. 获取tbody元素：这是表格的主体部分，我们将动态添加行到其中var tbody = document.querySelector('tbody');

设置外层循环 , 遍历数据源中的每个学生对象 , 有多少个学生对象 , 就创建几个 新的 tr 表格行 , 创建了 表格行 后 , 直接调用 tbody.appendChild(tr) 将 创建的元素 插入到 tbody 标签的 最后位置 ;

        // 3. 外层循环：遍历数据源中的每个学生对象for (var i = 0; i < datas.length; i++) {// 3.1 创建表格行(tr)：每循环一次创建一个新的表格行var tr = document.createElement('tr');// 3.2 将新创建的行添加到tbody中tbody.appendChild(tr);}

设置内层循环 , 遍历 学生对象 的 属性 , 如 :

		{name: 'Tom', // 学生姓名subject: 'HTML', // 考试科目score: 60 // 考试成绩}

为每个属性 创建一个 td 单元格 , 将属性值 放入 单元格 中 ,

使用 td.innerHTML = datas[i][k] 将 当前 的属性值 设置到 创建的 单元格 中 ,

之后 调用 tr.appendChild(td) 将 设置好的单元格 放在 tr 表格行 的 末尾子元素位置 ;

注意 : 此处 datas[i][k] , i 表示 学生对象 在 数据源数组 的 下标索引 , k 是 学生对象 的 键字符串 , datas[0][‘name’] 的值为 Tom ;

            // 3.3 内层循环：遍历当前学生对象的所有属性for (var k in datas[i]) {// 3.3.1 创建表格单元格(td)：为每个属性创建一个单元格var td = document.createElement('td');// 3.3.2 将属性值填充到单元格中// 原理：datas[i][k] 获取当前对象的属性值（如datas[0]['name'] => 'Tom'）td.innerHTML = datas[i][k];// 3.3.3 将单元格添加到当前行中tr.appendChild(td);}

代码示例 :

        // 2. 获取tbody元素：这是表格的主体部分，我们将动态添加行到其中var tbody = document.querySelector('tbody');// 3. 外层循环：遍历数据源中的每个学生对象for (var i = 0; i < datas.length; i++) {// 3.1 创建表格行(tr)：每循环一次创建一个新的表格行var tr = document.createElement('tr');// 3.2 将新创建的行添加到tbody中tbody.appendChild(tr);// 3.3 内层循环：遍历当前学生对象的所有属性for (var k in datas[i]) {// 3.3.1 创建表格单元格(td)：为每个属性创建一个单元格var td = document.createElement('td');// 3.3.2 将属性值填充到单元格中// 原理：datas[i][k] 获取当前对象的属性值（如datas[0]['name'] => 'Tom'）td.innerHTML = datas[i][k];// 3.3.3 将单元格添加到当前行中tr.appendChild(td);}// 3.4 创建操作单元格：添加包含"删除"链接的特殊单元格var td = document.createElement('td');// 3.4.1 填充删除链接：使用javascript:;阻止默认跳转行为td.innerHTML = '<a href="javascript:;">删除 </a>';// 3.4.2 将操作单元格添加到当前行tr.appendChild(td);}

6、节点操作 - 创建 删除链接 节点并插入 DOM 树

在上述 外层循环中 , 每行将 学生对象 的数据设置进去之后 , 还要在 末尾 添加 删除链接 , 点击 该链接 即可 删除 该 表格行 ;

        // 3. 外层循环：遍历数据源中的每个学生对象for (var i = 0; i < datas.length; i++) {// 3.1 创建表格行(tr)：每循环一次创建一个新的表格行var tr = document.createElement('tr');// 3.2 将新创建的行添加到tbody中tbody.appendChild(tr);}

使用下面的 代码 , 创建 td 单元格 标签元素 , 在该单元格中 设置 一个 删除链接 , 将 链接的 HTML 文本 '<a href="javascript:;">删除 </a>' 直接设置到 td.innerHTML 中 , 最后 将 设置好的 td 单元格 添加到 tr 表格行 中 ;

            // 3.4 创建操作单元格：添加包含"删除"链接的特殊单元格var td = document.createElement('td');// 3.4.1 填充删除链接：使用javascript:;阻止默认跳转行为td.innerHTML = '<a href="javascript:;">删除 </a>';// 3.4.2 将操作单元格添加到当前行tr.appendChild(td);

7、事件操作 - 添加删除事件

获取 表格中的 所有的 删除链接 , 为 这些 删除链接 添加 事件 , 每次点击 该链接 , 即可删除 表格行 ;

为删除链接 设置 onclick 点击事件 , 在绑定的 function 函数中 , 通过 this 可以获取 当前点击的 <a>元素 , 通过 this.parentNode 可以获取 链接标签 所在的 td 单元格 中 , 通过 this.parentNode.parentNode 可以获取 td 单元格 所在的 tr 表格行 ;

tr 表格行 的 父元素 是 tbody ;

如果要删除 tr 表格行 , 需要调用 其 父元素 tbody 的 removeChild 函数 , 最终 调用 tbody.removeChild(this.parentNode.parentNode) 代码可以从 tbody 中删除对应的 tr 表格行 ;

代码示例 :

        // 4. 添加删除功能：为所有删除链接绑定点击事件var as = document.querySelectorAll('a'); // 获取所有删除链接for (var i = 0; i < as.length; i++) {// 4.1 为每个删除链接绑定点击事件处理函数as[i].onclick = function() {// 4.2 点击时删除所在行：// this -> 当前点击的<a>元素// this.parentNode -> <td>单元格// this.parentNode.parentNode -> <tr>表格行// 原理：从tbody中移除当前行，DOM会自动更新渲染tbody.removeChild(this.parentNode.parentNode);}}

二、节点操作综合案例 - 完整代码

---

1、代码示例

代码示例 :

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>复制节点案例</title><style>table {/* 表格整体样式 */width: 500px;/* 设置表格宽度为500像素 */margin: 100px auto;/* 设置表格外边距：上下100px，左右自动（实现水平居中） */border-collapse: collapse;/* 合并相邻边框：使单元格边框合并为单一边框（消除双边框效果） */text-align: center;/* 表格内所有文本水平居中显示 */}td,th {/* 单元格通用样式（包括表头单元格和普通单元格） */border: 1px solid black;/* 设置单元格边框：1像素宽、实线、深灰色（#333） */}thead tr {/* 表头行（<thead>内的<tr>）特殊样式 */height: 40px;/* 固定表头行高度为40像素 */background-color: #ccc;/* 设置表头背景色为浅灰色（#ccc） */}</style>
</head><body><table cellspacing="0"><!-- 创建表格，cellspacing="0" 消除单元格默认间距 --><thead><!-- 表格头部区域（包含列标题） --><tr><!-- 表格行（table row） --><th>姓名</th><!-- 表头单元格（table header），加粗居中显示 --><th>科目</th><!-- 表头单元格 --><th>成绩</th><!-- 表头单元格 --><th>操作</th><!-- 表头单元格（用于操作按钮列） --></tr></thead><tbody><!-- 表格主体区域（将用JavaScript动态填充数据行） --><!-- JavaScript将在此处动态插入行：<tr><td>Tom</td><td>JavaScript</td><td>60</td><td><a>删除</a></td></tr>--></tbody></table><script>// 1. 准备数据源：创建一个包含学生信息的数组，每个元素是一个对象var datas = [{name: 'Tom', // 学生姓名subject: 'HTML', // 考试科目score: 60 // 考试成绩}, {name: 'Jerry',subject: 'CSS',score: 95}, {name: 'Mickey',subject: 'JavaScript',score: 90}, {name: 'Donald',subject: 'JQuery',score: 95}];// 2. 获取tbody元素：这是表格的主体部分，我们将动态添加行到其中var tbody = document.querySelector('tbody');// 3. 外层循环：遍历数据源中的每个学生对象for (var i = 0; i < datas.length; i++) {// 3.1 创建表格行(tr)：每循环一次创建一个新的表格行var tr = document.createElement('tr');// 3.2 将新创建的行添加到tbody中tbody.appendChild(tr);// 3.3 内层循环：遍历当前学生对象的所有属性for (var k in datas[i]) {// 3.3.1 创建表格单元格(td)：为每个属性创建一个单元格var td = document.createElement('td');// 3.3.2 将属性值填充到单元格中// 原理：datas[i][k] 获取当前对象的属性值（如datas[0]['name'] => 'Tom'）td.innerHTML = datas[i][k];// 3.3.3 将单元格添加到当前行中tr.appendChild(td);}// 3.4 创建操作单元格：添加包含"删除"链接的特殊单元格var td = document.createElement('td');// 3.4.1 填充删除链接：使用javascript:;阻止默认跳转行为td.innerHTML = '<a href="javascript:;">删除 </a>';// 3.4.2 将操作单元格添加到当前行tr.appendChild(td);}// 4. 添加删除功能：为所有删除链接绑定点击事件var as = document.querySelectorAll('a'); // 获取所有删除链接for (var i = 0; i < as.length; i++) {// 4.1 为每个删除链接绑定点击事件处理函数as[i].onclick = function() {// 4.2 点击时删除所在行：// this -> 当前点击的<a>元素// this.parentNode -> <td>单元格// this.parentNode.parentNode -> <tr>表格行// 原理：从tbody中移除当前行，DOM会自动更新渲染tbody.removeChild(this.parentNode.parentNode);}}</script>
</body></html>

2、运行效果

运行后 , 显示如下内容 :

点击 第一行表格 的 删除链接 , 此时就会删除第一行 内容 :

运行效果如下 :