js简单实现自动生成表格功能示例

在JavaScript编程中，自动生成表格是一项常见的任务，特别是在动态网页应用中。本示例通过JavaScript实现了根据给定数据自动生成HTML表格的功能，涉及到的核心知识点包括数组遍历、DOM操作以及事件处理。 HTML部分创建了一个基本的表格结构，包含一个表头（thead）和一个表体（tbody）。表头定义了表格列的标题，而表体部分为空，准备通过JavaScript动态填充内容。 ```html <table id="table"> <thead> <td>姓名</td> <td>年龄</td> <td>身高</td> </thead> <tbody></tbody> </table> ``` 接着，定义了一个名为`tableInfo`的数组，其中存储了多个人物的属性信息，包括姓名、年龄和身高。这个数组是生成表格数据的主要来源。 ```javascript var tableInfo = [ { 姓名: '张三', 年龄: 20, 身高: 160 }, // ... ]; ``` 然后，使用JavaScript进行DOM操作。通过`document.createElement`方法创建新的`<tr>`、`<td>`和删除按钮`<span>`元素。遍历`tableInfo`数组，为每个对象创建一行数据。每个单元格(`<td>`)的内容由数组中的属性值填充。同时，为每个删除按钮添加了一个点击事件监听器，以便在点击时删除相应的行。 ```javascript for (var i = 0; i < tableInfo.length; i++) { var tr = document.createElement('tr'); var tdName = document.createElement('td'); var tdAge = document.createElement('td'); var tdTall = document.createElement('td'); var del = document.createElement('span'); tdName.innerHTML = tableInfo[i].姓名; tdAge.innerHTML = tableInfo[i].年龄; tdTall.innerHTML = tableInfo[i].身高; del.innerHTML = '删除'; del.className = 'del'; createAll(tdName, tdAge, tdTall); } function createAll(tdName, tdAge, tdTall) { table.appendChild(tr); tr.appendChild(tdName); tr.appendChild(tdAge); tr.appendChild(tdTall); tr.appendChild(del); } ``` 设置删除按钮的点击事件。通过`getElementsByClassName`获取所有类名为`del`的元素，为每个元素绑定点击事件。当点击删除按钮时，其所在的`<tr>`元素将被从DOM树中移除。 ```javascript var btnDel = document.getElementsByClassName('del'); for (var i = 0; i < btnDel.length; i++) { btnDel[i].onclick = function() { this.parentNode.remove(); } } ``` 这个示例展示了如何利用JavaScript动态地创建和操作HTML元素，实现表格数据的展示以及交互功能。这种技术在Web开发中非常常见，特别是在响应式布局和实时更新数据的场景下。了解和掌握这些JavaScript DOM操作技巧对于提升Web应用的用户体验至关重要。