使用 jQuery 获取 HTML 数据表格中未选中行的值-js教程-PHP中文网

使用 jQuery 获取 HTML 数据表格中未选中行的值

霞舞

发布： 2025-08-31 16:51:03

原创

996人浏览过

使用 jquery 获取 html 数据表格中未选中行的值

本文旨在提供一种使用 JavaScript 获取 HTML 数据表格中，在点击某行按钮后，获取所有其他未被点击行的数据的方法。我们将通过监听按钮的点击事件，向上查找父元素 <tr>，然后获取其兄弟元素，最终提取所需数据。

在 HTML 数据表格中，有时我们需要在用户点击某一行后，获取其他行的信息。例如，当用户点击某行的“删除”按钮时，我们可能需要获取其他行的ID，以便进行批量操作或其他处理。本文将介绍如何使用 JavaScript 实现这一功能。

实现步骤

监听按钮点击事件： 首先，我们需要获取表格中所有按钮的引用，并为每个按钮添加点击事件监听器。

立即学习“前端免费学习笔记（深入）”；
获取当前行的兄弟元素： 当按钮被点击时，我们需要找到当前按钮所在的 <tr> 元素，并获取其所有的兄弟元素。这些兄弟元素代表了所有未被点击的行。
提取数据： 遍历每个兄弟元素，提取所需的数据。在本例中，我们提取除了第一个单元格（包含按钮的单元格）之外的所有单元格的文本内容。
处理数据： 将提取的数据进行处理，例如，将其存储到数组中，或者将其显示在页面上。

百度文心百中
百度大模型语义搜索体验中心

22

查看详情

代码示例

以下是一个完整的代码示例，演示了如何使用 JavaScript 获取 HTML 数据表格中未选中行的值：

<!DOCTYPE html>
<html>
<head>
  <title>获取未选中行的值</title>
  <style>
    table {
      border-collapse: collapse;
      width: 100%;
    }
    th, td {
      border: 1px solid black;
      padding: 8px;
      text-align: left;
    }
  </style>
</head>
<body>

<table id="all_departments">
  <thead>
    <tr>
      <th>操作</th>
      <th>部门</th>
      <th>创建日期</th>
      <th>名称</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><button>点击</button></td>
      <td>管理部门</td>
      <td>2016-02-03</td>
      <td>客户A</td>
    </tr>
    <tr>
      <td><button>点击</button></td>
      <td>销售部门</td>
      <td>2019-06-25</td>
      <td>客户B</td>
    </tr>
    <tr>
      <td><button>点击</button></td>
      <td>研发部门</td>
      <td>2023-03-15</td>
      <td>客户C</td>
    </tr>
  </tbody>
</table>

<script>
  const allBtns = document.querySelectorAll('button');
  allBtns.forEach(function(btn) {
    btn.addEventListener('click', function(e) {
      let elem = this.closest('tr');
      const siblings = getSiblings(elem);
      const result = [];
      siblings.map(ele => {
        ele.querySelectorAll('td').forEach((e, i) => {
          if (i !== 0) {
            result.push(e.innerText);
          }
        });
      });
      console.log(result.join(','));
    })
  });

  const getSiblings = function(e) {
    let siblings = [];
    if (!e.parentNode) {
      return siblings;
    }

    let sibling = e.parentNode.firstChild;

    while (sibling) {
      if (sibling.nodeType === 1 && sibling !== e) {
        siblings.push(sibling);
      }
      sibling = sibling.nextSibling;
    }
    return siblings;
  };
</script>

</body>
</html>

登录后复制

代码解释

document.querySelectorAll('button'): 获取所有按钮元素。
addEventListener('click', function(e) { ... }): 为每个按钮添加点击事件监听器。
this.closest('tr'): 找到当前按钮所在的 <tr> 元素。this 关键字指向触发事件的按钮元素。closest('tr') 方法从当前元素开始向上查找，直到找到最近的 <tr> 元素。
getSiblings(elem): 获取当前 <tr> 元素的所有兄弟元素。
siblings.map(ele => { ... }): 遍历每个兄弟元素。
ele.querySelectorAll('td').forEach((e, i) => { ... }): 遍历每个兄弟元素的单元格。
if (i !== 0) { ... }: 排除第一个单元格（包含按钮的单元格）。
result.push(e.innerText): 将单元格的文本内容添加到 result 数组中。
console.log(result.join(',')): 将 result 数组中的所有元素连接成一个字符串，并输出到控制台。
getSiblings 函数：用于获取元素的兄弟节点。

注意事项