如何使用jQuery获取HTML DataTable中未选中行的数据

问题梳理 #

原代码存在几个关键问题：

• JS中获取的表格ID是all_department，但HTML里表格ID是all_departments，ID不匹配导致事件绑定失效
• 绑定的是整行点击事件，而非按钮点击，不符合需求场景
• 直接序列化DOM行元素无法提取有效业务数据，需要手动解析单元格内容

修改后的代码 #

HTML（优化表头显示，保留核心结构） #

<table id="all_departments">
  <thead>
    <th>操作</th>                                   
    <th>部门</th>
    <th>创建日期</th>
    <th>客户名称</th>
  </thead>
  <tbody class="bl">
    <tr>
      <td><button class="row-btn">点击</button></td>
      <td>管理部</td>
      <td>2016-03-02</td>
      <td>客户X</td>
    </tr>
    <tr>
      <td><button class="row-btn">点击</button></td>
      <td>销售部</td>
      <td>2019-06-25</td>
      <td>客户Y</td>
    </tr>
  </tbody>
</table>

JavaScript #

// 获取表格和所有操作按钮
const table = document.getElementById('all_departments');
const buttons = table.querySelectorAll('.row-btn');

// 给每个按钮绑定点击事件
buttons.forEach(btn => {
  btn.addEventListener('click', function() {
    // 定位当前按钮所在的行
    const currentRow = this.closest('tr');
    // 获取tbody内所有数据行
    const allRows = table.querySelectorAll('tbody tr');
    // 存储非当前行的有效数据
    const nonCurrentData = [];

    allRows.forEach(row => {
      if (row !== currentRow) {
        // 提取当前行的单元格内容
        const cells = row.querySelectorAll('td');
        nonCurrentData.push({
          部门: cells[1].textContent.trim(),
          创建日期: cells[2].textContent.trim(),
          客户名称: cells[3].textContent.trim()
        });
      }
    });

    // 输出结果，可根据需求替换为业务逻辑
    console.log('非当前行数据:', nonCurrentData);
  });
});

代码说明 #

• 统一表格ID，确保JS能正确获取目标元素
• 给操作按钮添加统一类名row-btn，方便批量绑定事件
• 使用closest('tr')快速定位按钮所属行，避免层级依赖
• 遍历所有数据行，排除当前行后提取单元格内容，整理成结构化的对象数组
• 最终输出的是可直接使用的业务数据，而非无意义的DOM元素序列化结果

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