本文旨在提供一种使用 JavaScript 获取 HTML 数据表格中，在点击某行按钮后，获取所有其他未被点击行的数据的方法。我们将通过监听按钮的点击事件，向上查找父元素
，然后获取其兄弟元素，最终提取所需数据。
在 HTML 数据表格中，有时我们需要在用户点击某一行后，获取其他行的信息。例如，当用户点击某行的“删除”按钮时，我们可能需要获取其他行的ID，以便进行批量操作或其他处理。本文将介绍如何使用 JavaScript 实现这一功能。
实现步骤
监听按钮点击事件： 首先，我们需要获取表格中所有按钮的引用，并为每个按钮添加点击事件监听器。
立即学习“前端免费学习笔记（深入）”；
获取当前行的兄弟元素： 当按钮被点击时，我们需要找到当前按钮所在的
元素，并获取其所有的兄弟元素。这些兄弟元素代表了所有未被点击的行。
提取数据： 遍历每个兄弟元素，提取所需的数据。在本例中，我们提取除了第一个单元格（包含按钮的单元格）之外的所有单元格的文本内容。
处理数据： 将提取的数据进行处理，例如，将其存储到数组中，或者将其显示在页面上。
代码示例
以下是一个完整的代码示例，演示了如何使用 JavaScript 获取 HTML 数据表格中未选中行的值：
获取未选中行的值 table { border-collapse: collapse; width: 100%; } th, td { border: 1px solid black; padding: 8px; text-align: left; }
| 操作 | 部门 | 创建日期 | 名称 |
|---|---|---|---|
| 管理部门 | 2016-02-03 | 客户A | |
| 销售部门 | 2019-06-25 | 客户B | |
| 研发部门 | 2023-03-15 | 客户C |
代码解释
document.querySelectorAll(‘button’): 获取所有按钮元素。addEventListener(‘click’, function(e) { … }): 为每个按钮添加点击事件监听器。this.closest(‘tr’): 找到当前按钮所在的 元素。this 关键字指向触发事件的按钮元素。closest(‘tr’) 方法从当前元素开始向上查找，直到找到最近的 元素。getSiblings(elem): 获取当前 元素的所有兄弟元素。siblings.map(ele => { … }): 遍历每个兄弟元素。ele.querySelectorAll(‘td’).forEach((e, i) => { … }): 遍历每个兄弟元素的单元格。if (i !== 0) { … }: 排除第一个单元格（包含按钮的单元格）。result.push(e.innerText): 将单元格的文本内容添加到 result 数组中。console.log(result.join(‘,’)): 将 result 数组中的所有元素连接成一个字符串，并输出到控制台。getSiblings 函数：用于获取元素的兄弟节点。
注意事项
确保 HTML 数据表格的结构正确，每个 元素都包含相同数量的 元素。如果需要提取的数据类型不是文本，则需要使用其他方法来获取数据，例如，使用 e.value 获取 元素的值。可以根据实际需求修改代码，例如，可以添加过滤条件，只提取满足特定条件的行的信息。
总结
本文介绍了如何使用 JavaScript 获取 HTML 数据表格中未选中行的值。通过监听按钮的点击事件，获取当前行的兄弟元素，并提取所需的数据，我们可以轻松地实现这一功能。该方法灵活易用，可以应用于各种场景，例如，批量操作、数据分析等。
以上就是使用 jQuery 获取 HTML 数据表格中未选中行的值的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1518834.html
微信扫一扫 
支付宝扫一扫 
