【JavaScript源代码】JavaScript动态生成带删除行功能的表格.docx_js基于之前动态生成的学生成绩表格，每个学生增加删除表格行的功能资源-CSDN文库

版权申诉

33 浏览量 2021-12-29 09:15:05 上传评论收藏 17KB DOCX 举报

JavaScript动态生成带删除行功能的表格　　本文实例为大家分享了javascript实现动态生成表格/删除行的具体代码，供大家参考，具体内容如下　　动态生成一个带删除行功能的表格：　　实现思路　　1、获取表格<tbody>元素 2、获取要填充的数据，一般是从数据库取数据，也可以自己模拟一组数据进行测试，数据是以对象的形式存储的，多行数据可以用数组进行存储，数组中每一项均为一个对象 3、①循环遍历对象数组，创建行， ②嵌套一个循环- - -循环遍历对象： a.根据属性创建所需个数的单元格， b.并给单元格赋值， c.然后添加单元格到行中， ③添加一个单元格，并赋值一个a链接，文本内容- JavaScript动态生成带删除行功能的表格是Web开发中常见的需求，尤其在数据展示或交互式应用中。以下是如何实现这一功能的详细步骤和关键知识点：我们需要理解基本的HTML结构，这里涉及到一个包含thead（表头）和tbody（表体）的表格。在JavaScript中，我们将动态创建tbody内的tr（行）和td（单元格），同时添加删除行的功能。 1. **获取表格元素**：使用`document.querySelector`或`document.querySelectorAll`来选取DOM元素。在这个例子中，我们需要获取tbody元素，代码如下： ```javascript var tbody = document.querySelector('tbody'); ``` 2. **创建数据**：数据通常来源于服务器，但为了演示，我们可以手动创建一个对象数组。每个对象代表一行数据，属性对应表格列的值： ```javascript var list = [ {'name': '海绵宝宝', 'subject': 'JavaScript', 'age': 66}, // 更多数据... ]; ``` 3. **动态生成表格**： - **循环遍历数据**：使用for循环遍历list数组，为每条数据创建一行tr。 - **创建单元格td**：在内部嵌套for循环，遍历对象的属性，根据属性创建td，赋值并添加到tr中。 - **创建删除链接**：在每个tr的末尾添加一个带有删除功能的a链接。这个链接的点击事件会触发删除行的逻辑。 4. **添加事件监听器**：获取所有a元素，然后为它们绑定点击事件，实现删除行功能。删除操作通过DOM方法`removeChild`来实现，代码如下： ```javascript var as = document.querySelectorAll('a'); for (var j = 0; j < as.length; j++) { as[j].addEventListener('click', function() { tbody.removeChild(this.parentNode.parentNode); }); } ``` 5. **HTML结构**： HTML部分需要有一个基本的表格结构，包括thead和tbody。thead中的tr定义了表头，tbody则用来存放动态生成的行。 6. **CSS样式**：可以通过CSS来美化表格，例如设置边框、背景色等。完整的代码示例： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>动态生成表格</title> <style> table {border: 1px solid pink; border-collapse: collapse;} thead {background-color: #ddd;} </style> </head> <body> <table border="1" cellpadding="5" cellspacing="0" align="center" width="600px"> <thead> <tr> <th>姓名</th> <th>科目</th> <th>成绩</th> <th>操作</th> </tr> </thead> <tbody></tbody> </table> <script> var tbody = document.querySelector('tbody'); var list = [ {'name': '海绵宝宝', 'subject': 'JavaScript', 'age': 66}, // 更多数据... ]; for (var i = 0; i < list.length; i++) { var tr = document.createElement('tr'); for (var k in list[i]) { var td = document.createElement('td'); td.textContent = list[i][k]; tr.appendChild(td); } var delLink = document.createElement('td'); delLink.innerHTML = '<a href="#">删除</a>'; delLink.firstChild.addEventListener('click', function() { tbody.removeChild(this.parentNode.parentNode); }); tr.appendChild(delLink); tbody.appendChild(tr); } </script> </body> </html> ``` 以上就是用JavaScript动态生成带删除行功能的表格的核心技术和实现步骤。这个功能对于学习JavaScript DOM操作和事件处理非常有帮助，同时在实际项目中也有很高的实用价值。

资源推荐

资源详情

资源评论