循环生成表格中按钮无法触发getPayload函数的问题求助

你当前的写法失效，核心原因是直接在onclick中插入对象${data.results[i]}时，JS会把对象转为字符串[object Object]，导致语法错误，函数无法触发。下面提供几种可行的解决方案：

方案1：事件委托（推荐） #

不在循环中给每个按钮单独绑定事件，而是利用事件冒泡机制，给表格父容器绑定一次事件，统一处理按钮点击：

// 生成表格的函数
function renderTable(data) {
  const tbody = document.querySelector('#target-table tbody');
  tbody.innerHTML = '';

  data.results.forEach(row => {
    const tr = document.createElement('tr');
    // 将行数据转成JSON字符串存在行的data属性中
    tr.dataset.row = JSON.stringify(row);

    // 渲染其他列内容...

    // 创建操作列和按钮
    const actionTd = document.createElement('td');
    const downloadBtn = document.createElement('button');
    downloadBtn.textContent = 'Download';
    downloadBtn.classList.add('download-btn'); // 标记按钮类名
    actionTd.appendChild(downloadBtn);
    tr.appendChild(actionTd);
    tbody.appendChild(tr);
  });
}

// 给表格绑定事件委托
document.querySelector('#target-table').addEventListener('click', e => {
  if (e.target.classList.contains('download-btn')) {
    // 找到当前按钮所在的行，解析存储的行数据
    const rowData = JSON.parse(e.target.closest('tr').dataset.row);
    // 传递audit数据到getPayload
    getPayload(rowData.audit);
  }
});

// 你的业务函数
function getPayload(auditData) {
  // 调用REST服务的逻辑，示例：
  fetch('/your-api-endpoint', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(auditData)
  })
  .then(res => res.json())
  .then(result => {
    // 处理接口返回结果
  })
  .catch(err => console.error('请求失败:', err));
}

方案2：循环内直接绑定事件 #

通过addEventListener给每个按钮绑定点击事件，利用forEach的闭包特性保留当前行数据：

function renderTable(data) {
  const tbody = document.querySelector('#target-table tbody');
  tbody.innerHTML = '';

  data.results.forEach(row => {
    const tr = document.createElement('tr');

    // 渲染其他列内容...

    const actionTd = document.createElement('td');
    const downloadBtn = document.createElement('button');
    downloadBtn.textContent = 'Download';
    // 直接绑定点击事件，传入当前行的audit数据
    downloadBtn.addEventListener('click', () => getPayload(row.audit));
    actionTd.appendChild(downloadBtn);
    tr.appendChild(actionTd);
    tbody.appendChild(tr);
  });
}

// 业务函数同方案1
function getPayload(auditData) {
  // 调用REST服务逻辑
}

方案3：内联事件（不推荐，仅作参考） #

如果必须使用内联onclick，需要将对象转为JSON字符串并转义引号，确保语法合法：

function renderTable(data) {
  const tbody = document.querySelector('#target-table tbody');
  tbody.innerHTML = '';

  for (let i = 0; i < data.results.length; i++) {
    const row = data.results[i];
    // 将行数据转成JSON字符串并转义双引号
    const rowStr = JSON.stringify(row).replace(/"/g, '&quot;');
    const trHtml = `
      <tr>
        <!-- 其他列内容 -->
        <td>
          <button onclick="getPayload(JSON.parse('${rowStr}').audit)">Download</button>
        </td>
      </tr>
    `;
    tbody.innerHTML += trHtml;
  }
}

// 业务函数同方案1
function getPayload(auditData) {
  // 调用REST服务逻辑
}

注意：内联事件方式存在XSS风险（如果数据包含恶意脚本），且维护性差，优先选择前两种方案。

内容的提问来源于stack exchange，提问作者TAHASEEN