如何借助jQuery点击编辑按钮获取表格行数据并转为数组格式

先修正HTML结构（解决form包裹tr的规范问题） #

首先，<form>直接包裹<tr>不符合HTML规范，正确的表格结构应该由<table>包含<tr>。我们可以给表格行添加数据标识，同时补上编辑按钮：

<table>
  <!-- 循环生成的表格行 -->
  <tr class="role-row" data-role-id="<?php echo $value['RoleId']; ?>">
    <td><?php echo $Sr; ?></td>
    <td class="text-capitalize role-name"><?php echo $value['RoleName']; ?></td>
    <td>
      <div class="row">
        <div class="col">
          <button class="btn btn-primary role-edit-btn">编辑</button>
        </div>
        <div class="col">
          <button class="btn btn-danger btn-delete" 
                  data-record-id="<?php echo $value['RoleId']; ?>" 
                  data-table-name="role" 
                  data-primary-key="RoleId" 
                  data-url="controller/RoleController.php" 
                  data-function="DeleteRole" 
                  data-redirect="ViewRole.php">
            <i class="fas fa-solid fa-trash" style="color:red;"></i>
          </button>
        </div>
      </div>
    </td>
  </tr>
</table>

这里把自定义属性改成了HTML规范的data-*格式，给表格行添加类名方便后续定位，同时补充了编辑按钮。

修正JS代码，实现获取行数据并转为数组 #

以下是基于jQuery的实现代码，点击编辑按钮时提取对应行的所有数据并转为数组：

$('.role-edit-btn').click(function(e) {
  e.preventDefault();
  
  // 获取当前按钮所在的表格行
  const $row = $(this).closest('.role-row');
  
  // 提取行内所有td的文本内容，转为原生数组
  const rowData = $row.find('td').map(function() {
    // 去除文本前后多余空格
    return $(this).text().trim();
  }).get();
  
  // 可选：把行的角色ID也加入数组
  rowData.push($row.data('role-id'));
  
  // 查看结果
  console.log('行数据数组:', rowData);
  alert(JSON.stringify(rowData));
});

关键说明 #

• closest('.role-row')：从当前按钮向上查找最近的表格行，确保获取对应行的数据
• map()：遍历行内所有<td>元素，提取文本内容
• get()：把jQuery对象集合转为原生JS数组
• 如果需要结构化的键值对数据，可调整为：

const structuredData = {
  serial: $row.find('td').eq(0).text().trim(),
  roleName: $row.find('.role-name').text().trim(),
  roleId: $row.data('role-id')
};
// 转成数组用 Object.values(structuredData)

原代码的问题点 #

1. HTML结构不符合规范，form包裹tr会导致浏览器解析异常
2. 缺少编辑按钮的HTML代码，无法触发目标点击事件
3. serialize()仅用于序列化表单控件（如input、select），你的行内无此类控件，无法获取有效数据
4. serialize()返回URL编码字符串，直接转JSON不具备数组格式的意义

内容的提问来源于stack exchange，提问作者shakeeb ahmed khan