在前端开发过程中，经常需要对表格进行交互操作，例如点击某一行获取数据、修改数据等。但是当表格中有多行时，如何确定用户点击了哪一行呢？本文将介绍三种实现方式。
方式一：通过事件代理获取行数
事件代理是指把事件委托给父元素或祖先元素进行处理。因此，我们可以利用事件冒泡机制，监听整个表格的 click 事件，并通过 target 属性获取被点击的元素。由于每一行都是一个 tr 标签，因此可以通过该元素的 parentNode 属性获取所在的行数。
示例代码：
------ -------------
--------------------- -----------
--------------------- -----------
--------------------- -----------
--------
--------
------------------------------------------------------------ --------------- -
-- --------------------- --- ----- -
----- -------- - ---------------------------------
-------------------- --- --------------
-
---
---------上述代码中，通过 addEventListener 方法监听表格的 click 事件，并判断被点击的元素是否为 td 标签。如果是，则获取该元素的 parentNode 属性，再使用 rowIndex 属性获取所在的行数。
注意，该方法只适用于表格没有动态添加或删除行的情况，因为如果新增或删除了行，行数和行号就会变化。
方式二：通过自定义属性获取行数
在表格中添加一个自定义属性，例如 data-rowindex，在每一行 tr 标签上设置不同的值，表示该行所在的行数。然后在 click 事件处理程序中，获取被点击元素的自定义属性值即可。
示例代码：
------ -------------
--- ----------------------------------- -----------
--- ----------------------------------- -----------
--- ----------------------------------- -----------
--------
--------
------------------------------------------------------------ --------------- -
-- --------------------- --- ----- -
----- -------- - -----------------------------------------
-------------------- --- --------------
-
---
---------上述代码中，我们在每个 tr 标签上添加了 data-rowindex 属性，并分别设置不同的值。然后在事件处理程序中，通过 parentNode.dataset.rowindex 获取所在行的行数。
这种方式比较灵活，适用于动态添加或删除行的情况。
方式三：使用第三方库
除了手动实现，还可以使用第三方库来实现获取点击行的行数。例如，jQuery 提供了多种方法来选择、操作表格元素，其中之一是通过 :eq(index) 伪类选择器获取表格中指定行的元素。
示例代码：
------ -------------
--------------------- -----------
--------------------- -----------
--------------------- -----------
--------
------- -----------------------------------------------------------
--------
----------- --------------------- -
----- -------- - --------------- - --
-------------------- --- --------------
---
---------上述代码中，我们使用 jQuery 的 click 方法监听每个 tr 标签的 click 事件，并在回调函数中使用 index 方法获取该元素在表格中的位置，再加 1 即为所在的行数。
总结
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/25534