js循环数组拼接表格字符串，点击详情获取行数据

好的，这是一个比较常见的前端问题。我可以为您提供一种实现方式，具体如下：

假设我们有一个数组 `data`，包含了表格每一行的数据，每行数据的格式如下：

const data = [
  {id: 1, name: '张三', age: 20},
  {id: 2, name: '李四', age: 25},
  {id: 3, name: '王五', age: 30}
];

我们可以通过循环数组，拼接出表格的 HTML 字符串，并给每行数据添加一个点击事件，以便在点击时获取行数据。具体的实现代码如下：

// 获取表格容器元素
const tableContainer = document.getElementById('table-container');

// 定义表格 HTML 字符串
let tableHtml = '<table>';
tableHtml += '<thead><tr><th>ID</th><th>姓名</th><th>年龄</th><th>操作</th></tr></thead>';
tableHtml += '<tbody>';
for (let i = 0; i < data.length; i++) {
  const row = data[i];
  tableHtml += '<tr>';
  tableHtml += `<td>${row.id}</td>`;
  tableHtml += `<td>${row.name}</td>`;
  tableHtml += `<td>${row.age}</td>`;
  tableHtml += `<td><a href="javascript:void(0);" data-index="${i}">详情</a></td>`;
  tableHtml += '</tr>';
}
tableHtml += '</tbody></table>';

// 将表格 HTML 字符串插入到容器元素中
tableContainer.innerHTML = tableHtml;

// 给每个详情链接添加点击事件
const detailLinks = tableContainer.querySelectorAll('a[data-index]');
for (let i = 0; i < detailLinks.length; i++) {
  const link = detailLinks[i];
  link.addEventListener('click', () => {
    const index = parseInt(link.getAttribute('data-index'));
    const row = data[index];
    console.log(row); // 输出行数据
  });
}

上面的代码中，我们首先获取表格容器元素 `tableContainer`，然后定义了一个表格 HTML 字符串 `tableHtml`，其中包含了表格的头部和每一行的数据，以及一个详情链接。我们在循环数组时，使用模板字符串拼接出每一行的 HTML 字符串，并使用了 `data-index` 属性存储了行数据在数组中的索引。最后，我们将整个表格的 HTML 字符串插入到容器元素中，同时给每个详情链接添加了一个点击事件，在点击时获取行数据并输出到控制台中。

希望这个实现方式能够帮助到您！