在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应用的用户体验至关重要。
