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>";
  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;

// 获取 table 元素
var myTable = document.getElementsByTagName("table")[0];

// 获取所有的表格行
var rows = myTable.getElementsByTagName("tr");

// 循环遍历表格行，为每一行绑定点击事件
for (var i = 1; i < rows.length; i++) {
  rows[i].onclick = function() {
    handleClick(this);
  }
}

// 点击事件的处理函数
function handleClick(row) {
  var cells = row.getElementsByTagName("td");
  var data = {
    name: cells[0].innerHTML,
    age: cells[1].innerHTML,
    gender: cells[2].innerHTML
  };
  alert(JSON.stringify(data));
}

在上面的示例中，我们首先定义了一个 JSON 数据数组 `data`，其中包含了三个对象，每个对象都有 `name`、`age` 和 `gender` 三个属性。接着，我们定义了一个字符串变量 `tableHTML`，用于拼接表格的 HTML 代码。在循环遍历 JSON 数据数组时，我们将每个对象的属性值拼接到表格行的 HTML 代码中。

在将表格 HTML 代码添加到页面中后，我们使用 `getElementsByTagName()` 方法获取了 table 元素和所有的表格行，并循环遍历表格行，为每一行绑定了点击事件。在点击事件的处理函数中，我们使用 `getElementsByTagName()` 方法获取了该行的所有单元格，将单元格的文本内容保存为一个 JSON 数据对象，并使用 `JSON.stringify()` 方法将其转换成字符串形式，并使用 `alert()` 方法弹出这个字符串，从而实现了点击行获取 JSON 数据的功能。