如何给MySQL生成的HTML表格加按钮，点击传递整行数据到新页面编辑

完全可以实现，以下是3种常用的落地方案，你可以根据自己的技术栈选择：

方案1：URL参数传递（最简单，适合小数据量场景） #

直接在渲染表格的时候，把行数据编码后拼接到跳转链接的参数里，点击按钮直接跳转即可。
如果是后端渲染（比如PHP/Java/Python等从MySQL取数后渲染页面），直接在循环输出表格行的时候拼接参数即可，修改后的按钮代码示例：

<td>
  <!-- 特殊字符比如@要做URL编码，后端渲染时直接调用对应语言的urlencode方法即可 -->
  <a href="edit_page.html?id=1&first_name=John&last_name=Doe&email=johndoe%40gmail.com" target="_blank">编辑</a>
</td>

编辑页面直接解析URL参数即可拿到对应数据。

方案2：JS+localStorage存储（参数不暴露在URL中，适合前端渲染场景） #

给编辑按钮绑定点击事件，读取当前行所有单元格数据，存入本地存储后跳转到新页面：

第一步：修改按钮代码 #

<td><button class="edit-btn">编辑</button></td>

第二步：添加JS逻辑 #

// 给所有编辑按钮绑定点击事件
document.querySelectorAll('.edit-btn').forEach(btn => {
  btn.addEventListener('click', function() {
    // 获取当前按钮所在的行
    const currentRow = this.closest('tr')
    // 组装行数据
    const rowData = {
      id: currentRow.cells[0].textContent,
      first_name: currentRow.cells[1].textContent,
      last_name: currentRow.cells[2].textContent,
      email: currentRow.cells[3].textContent
    }
    // 存入本地存储
    localStorage.setItem('edit_row_data', JSON.stringify(rowData))
    // 跳转到编辑页
    window.open('edit_page.html', '_blank')
  })
})

第三步：编辑页取数 #

在编辑页直接读取存储的数据即可：

const editData = JSON.parse(localStorage.getItem('edit_row_data'))
// 取数完成后可清除缓存
localStorage.removeItem('edit_row_data')

方案3：隐藏表单POST提交（适合数据量较大、对安全性有要求的场景） #

每个编辑按钮对应一个隐藏表单，点击按钮提交表单到新页面，参数不会暴露在URL中：

<td>
  <form action="edit_page.php" method="post" target="_blank">
    <input type="hidden" name="id" value="1">
    <input type="hidden" name="first_name" value="John">
    <input type="hidden" name="last_name" value="Doe">
    <input type="hidden" name="email" value="johndoe@gmail.com">
    <button type="submit">编辑</button>
  </form>
</td>

后端直接读取POST参数即可拿到数据。

最佳实践推荐 #

更推荐你只传递行ID到编辑页，编辑页拿到ID后再去MySQL查询对应的数据，既能减少参数传递量，也能避免前端篡改数据带来的安全问题，实现起来也更简单。

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