js 循环数组生成表格，最后一行是详情按钮，点击详情按钮获取该行对应的json数据

可以使用循环遍历数组，动态生成表格，最后一行添加一个详情按钮，并为按钮绑定点击事件的监听器。在事件处理函数中，可以根据点击的按钮获取该行对应的 JSON 数据，并进行处理。

以下是一个示例代码：

HTML部分：

<table id="myTable">
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
      <th>Gender</th>
      <th>Action</th>
    </tr>
  </thead>
  <tbody></tbody>
</table>

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()` 函数进行处理。你可以根据需要修改代码中的数组和处理函数。