可以使用循环遍历
数组，
动态生成
表格，最后一行
添加一个详情
按钮，并为
按钮绑定点
击事件的监听器。在事件处理函数中，可以根据点
击的
按钮获取该行对应的
JSON 数据，并进行处理。
以下是一个示例代码：
HTML部分：
```html
<table id="myTable">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Gender</th>
<th>Action</th>
</tr>
</thead>
<tbody></tbody>
</table>
```
JavaScript部分：
```javascript
// 假设有一个包含
JSON 数据的
数组
var data = [
{name: "Alice", age: 20, gender: "Female"},
{name: "Bob", age: 30, gender: "Male"},
{name: "Charlie", age: 40, gender: "Male"}
];
// 获取
表格和
表格主体
var table = document.getElementById("myTable");
var tbody = table.getElementsByTagName("tbody")[0];
// 循环遍历
数组，为每个
数组元素生成一个
表格行
for (var i = 0; i < data.length; i++) {
var row = tbody.insertRow(); // 创建
表格行
// 创建
表格单元格并填充
数据
var cellName = row.insertCell();
cellName.innerHTML = data[i].name;
var cellAge = row.insertCell();
cellAge.innerHTML = data[i].age;
var cellGender = row.insertCell();
cellGender.innerHTML = data[i].gender;
// 创建详情
按钮并为其绑定点
击事件的监听器
var cellAction = row.insertCell();
var button = document.createElement("button");
button.innerHTML = "Details";
button.rowIndex = i; // 将
按钮所在的行索引保存在自定义属性中，以便在事件处理函数中使用
button.addEventListener("click", function() {
var index = this.rowIndex; // 获取
按钮所在的行索引
var details = data[index]; // 获取该行对应的
JSON 数据
handleDetails(details); // 将获取到的
数据作为参数传递给其他函数进行处理
});
cellAction.appendChild(button); // 将
按钮添加到
表格单元格中
}
// 处理详情的函数
function handleDetails(details) {
console.log(details);
// 在这
里进行对详情的处理
}
```
以上代码会生成一个包含三行
数据和一个详情
按钮的
表格，最后一行的详情
按钮会在点
击时获取该行对应的
JSON 数据，并将其作为参数传递给 `handleDetails()` 函数进行处理。你可以根据需要修改代码中的
数组和处理函数。
747
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
