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

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

核心思路

核心思路如下：

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

代码实现

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

  

    
click
    
Departments
    
Creation Date
    
Name
  
  

    

      
click
      
Management
      
2-3-2016
      
client x
    
    

      
click
      
Sales
      
25-6-2019
      
client y
    
  

代码解释：


Etna
Etna：用文字做AI世界的造物主
下载

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

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

注意事项

• 确保已经正确引入 jQuery 库。
• 根据实际情况修改表格的 ID 和类名。
• 可以根据需要修改数据提取和输出的方式。
• 可以根据实际情况添加错误处理和异常处理。
• 示例中跳过了第一列，如果需要修改，请删除if(index != 0)判断

总结

本文介绍了如何使用JavaScript和jQuery获取HTML表格中未选中行的值。通过监听按钮点击事件，获取当前行，然后获取其兄弟节点，并提取这些节点中的数据，最终将结果输出。 这种方法可以方便地获取表格中特定行的数据，为Web开发提供了便利。