js 通过字符串拼接表格，每行绑定点击事件，点击行获取该行对应的json数据

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

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

// 定义一个字符串变量，用于拼接表格 HTML 代码
var tableHTML = "<table>";

// 拼接表头行的 HTML 代码
tableHTML += "<tr><th>姓名</th><th>年龄</th><th>性别</th></tr>";

// 循环遍历 JSON 数据数组，拼接表格行的 HTML 代码
for (var i = 0; i < data.length; i++) {
  tableHTML += "<tr onclick='handleClick(" + JSON.stringify(data[i]) + ")'>";
  tableHTML += "<td>" + data[i].name + "</td>";
  tableHTML += "<td>" + data[i].age + "</td>";
  tableHTML += "<td>" + data[i].gender + "</td>";
  tableHTML += "</tr>";
}

// 拼接表格结束标签的 HTML 代码
tableHTML += "</table>";

// 将表格 HTML 代码添加到页面中
document.body.innerHTML += tableHTML;

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

在上面的示例中，我们首先定义了一个 JSON 数据数组 `data`，其中包含了三个对象，每个对象都有 `name`、`age` 和 `gender` 三个属性。接着，我们定义了一个字符串变量 `tableHTML`，用于拼接表格的 HTML 代码。在循环遍历 JSON 数据数组时，我们将每个对象的属性值拼接到表格行的 HTML 代码中，并在每一行的 `onclick` 属性中直接传入了对应的 JSON 数据对象，以便在点击事件的处理函数中获取。

在将表格 HTML 代码添加到页面中后，我们使用 `handleClick()` 函数作为点击事件的处理函数，并在其中使用 `JSON.stringify()` 方法将 JSON 数据对象转换成字符串形式，并使用 `alert()` 方法弹出这个字符串，从而实现了点击行获取 JSON 数据的功能。