js 拼接表格，行绑定点击事件，点击行获取该行对应的json数据

在 JavaScript 中，我们可以使用字符串拼接的方式动态生成表格，并为表格的行绑定点击事件，以获取该行对应的 JSON 数据。以下是一个示例：

// 定义一个 JSON 数据数组
var data = [
  { name: "张三", age: 18, gender: "男" },
  { name: "李四", age: 20, gender: "女" },
  { name: "王五", age: 22, gender: "男" }
];

// 创建一个空的 table 元素
var myTable = document.createElement("table");

// 创建表头行
var headerRow = myTable.insertRow();

// 添加表头单元格
var nameHeader = headerRow.insertCell();
nameHeader.innerHTML = "姓名";

var ageHeader = headerRow.insertCell();
ageHeader.innerHTML = "年龄";

var genderHeader = headerRow.insertCell();
genderHeader.innerHTML = "性别";

// 循环遍历 JSON 数据数组，创建表格行
for (var i = 0; i < data.length; i++) {
  // 创建表格行
  var row = myTable.insertRow();

  // 添加表格单元格
  var nameCell = row.insertCell();
  nameCell.innerHTML = data[i].name;

  var ageCell = row.insertCell();
  ageCell.innerHTML = data[i].age;

  var genderCell = row.insertCell();
  genderCell.innerHTML = data[i].gender;

  // 为表格行绑定点击事件，并传入对应的 JSON 数据
  row.onclick = function() {
    handleClick(data[i]);
  }
}

// 将表格添加到页面中
document.body.appendChild(myTable);

// 点击事件的处理函数
function handleClick(data) {
  alert(JSON.stringify(data));
}

在上面的示例中，我们首先定义了一个 JSON 数据数组 `data`，其中包含了三个对象，每个对象都有 `name`、`age` 和 `gender` 三个属性。接着，我们创建了一个空的 `table` 元素，并动态生成了表头行和表格行，将 JSON 数据数组中的数据填充到表格中。在为表格行绑定点击事件时，我们使用了闭包来保存对应的 JSON 数据，以便在点击事件的处理函数中获取。最后，我们将表格添加到页面中。

当用户点击表格行时，点击事件的处理函数 `handleClick()` 将会被调用，并且将点击行对应的 JSON 数据传入其中。在这个处理函数中，我们使用 `JSON.stringify()` 方法将 JSON 数据转换成字符串形式，并使用 `alert()` 方法弹出这个字符串，从而实现了点击行获取 JSON 数据的功能。