获取HTML表格中未选中行的值：jQuery实现教程-js教程-PHP中文网

获取HTML表格中未选中行的值：jQuery实现教程

霞舞

发布： 2025-08-31 17:24:01

原创

661人浏览过

获取html表格中未选中行的值：jquery实现教程

本文旨在提供一种使用jQuery获取HTML表格中未选中行数据的实用方法。通过监听按钮点击事件，获取当前点击按钮所在行的兄弟节点（即其他行），并提取这些行中的数据，最终将结果输出。本文将详细讲解实现步骤，并提供完整的代码示例，帮助开发者快速掌握该技巧。

在Web开发中，经常会遇到需要获取表格中特定行数据的情况，例如排除当前操作行，获取其他行的信息。本文将介绍如何使用JavaScript和jQuery来实现这一功能。

核心思路

核心思路如下：

监听按钮点击事件： 为表格中的每个按钮添加点击事件监听器。
获取当前行： 在点击事件处理函数中，获取当前点击按钮所在的 <tr> 元素。
获取兄弟节点： 获取当前 <tr> 元素的所有兄弟节点（即其他 <tr> 元素）。
提取数据： 遍历兄弟节点，提取每个 <tr> 元素中的 <td> 元素的值，并将其存储在数组中。
输出结果： 将提取的数据拼接成字符串或以其他形式输出。

代码实现

以下是实现上述功能的代码示例：

<!DOCTYPE html>
<html>
<head>
<title>获取HTML表格中未选中行的值</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>

<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>click</button></td>
      <td>Management</td>
      <td>2-3-2016</td>
      <td>client x</td>
    </tr>
    <tr>
      <td><button>click</button></td>
      <td>Sales</td>
      <td>25-6-2019</td>
      <td>client y</td>
    </tr>
  </tbody>
</table>

<script>
$(document).ready(function() {
  $('#all_departments button').click(function() {
    // 获取当前按钮所在的 tr 元素
    var currentRow = $(this).closest('tr');

    // 获取当前 tr 元素的所有兄弟节点（即其他 tr 元素）
    var siblings = currentRow.siblings();

    // 存储结果的数组
    var result = [];

    // 遍历兄弟节点，提取数据
    siblings.each(function() {
      $(this).find('td').each(function(index) {
        //跳过第一个button列
        if(index != 0){
            result.push($(this).text());
        }
      });
    });

    // 输出结果
    console.log(result.join(','));
  });
});
</script>

</body>
</html>

登录后复制

代码解释：

千图设计室AI海报

千图网旗下的智能海报在线设计平台

172

查看详情

立即学习“前端免费学习笔记（深入）”；

引入 jQuery： 首先，需要在 HTML 文件中引入 jQuery 库。
绑定点击事件： 使用 $('#all_departments button').click(function() { ... }); 为表格中的所有按钮绑定点击事件。
$(this)： 在点击事件处理函数中，$(this) 指向当前点击的按钮。
$(this).closest('tr')： 使用 closest() 方法获取当前按钮所在的最近的父级 <tr> 元素。
currentRow.siblings()： 使用 siblings() 方法获取当前 <tr> 元素的所有兄弟节点。
siblings.each(function() { ... });： 使用 each() 方法遍历所有兄弟节点。
$(this).find('td')： 在循环中使用 find('td') 方法查找每个兄弟节点中的所有 <td> 元素。
result.push($(this).text())： 使用 text() 方法获取 <td> 元素的文本内容，并将其添加到 result 数组中。
console.log(result.join(','))： 使用 join(',') 方法将数组中的元素拼接成字符串，并使用逗号分隔，然后将其输出到控制台。