如何使用JavaScript获取HTML表格中未点击行的数据

核心思路 #

给表格每行的按钮绑定点击事件，点击后标记当前行已被操作；当任意按钮被点击时，筛选出所有未被标记的行，提取行内的部门、创建日期、客户名称数据，转换为JSON字符串后完成持久化。

修改后的HTML代码 #

给每行按钮添加统一类名，方便JS选择操作：

<table id="all_departments">
 <thead>
          <th><button>click</button></th>                                    
          <th>Departments</th>
          <th>Creation Date</th>
          <th>Name</th>
 </thead>
<tbody class="bl">
       <tr>
            <td><button class="row-btn">click</button></td>
            <td>Management</td>
            <td>2-3-2016</td>
            <td>client x</td>
      </tr>

       <tr>
            <td><button class="row-btn">click</button></td>
            <td>Sales</td>
            <td>25-6-2019</td>
            <td>client y</td>
      </tr>
</tbody>
</table>

JavaScript实现代码 #

// 获取所有行内的操作按钮
const rowButtons = document.querySelectorAll('.row-btn');

// 给每个按钮绑定点击事件
rowButtons.forEach(btn => {
  btn.addEventListener('click', function() {
    // 标记当前按钮所在的行已被点击
    this.closest('tr').classList.add('clicked');
    
    // 收集所有未被点击行的数据
    const unclickedRowsData = [];
    const allRows = document.querySelectorAll('#all_departments tbody tr');
    
    allRows.forEach(row => {
      // 跳过已经标记为点击的行
      if (row.classList.contains('clicked')) return;
      
      // 提取当前行的列数据
      const cells = row.querySelectorAll('td');
      unclickedRowsData.push({
        department: cells[1].textContent.trim(),
        creationDate: cells[2].textContent.trim(),
        clientName: cells[3].textContent.trim()
      });
    });
    
    // 将数据转换为JSON字符串
    const jsonData = JSON.stringify(unclickedRowsData);
    
    // 持久化存储（示例用localStorage，可替换为后端接口请求等方式）
    localStorage.setItem('unclickedDepartments', jsonData);
    
    // 可选：控制台打印结果用于验证
    console.log('未点击行的JSON数据:', jsonData);
  });
});

代码说明 #

• 点击按钮时，通过closest('tr')定位当前行，添加clicked类完成已操作标记
• 遍历表格所有数据行，排除带有clicked类的行，提取对应列的文本内容
• 用JSON.stringify()将数据数组转为JSON字符串，通过localStorage实现浏览器端持久化；若需后端存储，替换localStorage.setItem部分为接口请求即可

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