在前端开发中，我们经常需要让用户通过点击按钮来获取某些数据。本文将介绍如何通过单击表格中的按钮来获取该行的内容。
步骤
- 在 HTML 中创建一个表格，并添加一个“获取”按钮：
-- -------------------- ---- -------
-------
-------
----
-----------
-----------
-----------
-----
--------
-------
----
-----------
-----------
----------- -------------------------------------
-----
----
-----------
-----------
----------- -------------------------------------
-----
----
-----------
-----------
----------- -------------------------------------
-----
--------
--------- 使用 JavaScript 监听“获取”按钮的点击事件，并获取该行的内容：
document.querySelectorAll('.get-data-btn').forEach(btn => {
btn.addEventListener('click', () => {
const row = btn.closest('tr');
const name = row.querySelector('td:nth-child(1)').textContent;
const age = row.querySelector('td:nth-child(2)').textContent;
console.log(`姓名：${name}，年龄：${age}`);
});
});- 运行代码并测试。当用户点击某个“获取”按钮时，控制台会输出该行的姓名和年龄。
深度解析
上述代码使用了以下 JavaScript API：
document.querySelectorAll()：返回一个 NodeList 对象，包含所有匹配特定 CSS 选择器的元素。forEach()：遍历 NodeList 中的每个元素，并对它们执行相同的操作。addEventListener()：为指定元素添加一个事件监听器。closest()：返回离当前元素最近的具有指定选择器的祖先元素。querySelector()：返回匹配指定 CSS 选择器的第一个元素。
在监听到“获取”按钮的点击事件后，我们可以通过 btn.closest('tr') 获取到该按钮所在的行。然后，通过 row.querySelector('td:nth-child(1)') 和 row.querySelector('td:nth-child(2)') 分别获取到该行中第一列和第二列的内容。
注意，这里使用了伪类 :nth-child() 来选择表格中的列。由于表头也是一个行，因此要从第二个 td 元素开始选择。
实际应用
本文介绍的技术可以用于很多实际场景，例如：
- 在管理系统中，管理员可以通过点击某一行的“编辑”按钮来获取该行的数据，并进行修改操作。
- 在在线订单系统中，客户可以通过点击某一行的“查看详情”按钮来获取该行的订单信息，以便进行支付或取消订单等操作。
示例代码
完整示例代码如下：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
----------------------
-------
------
-------
-------
----
-----------
-----------
-----------
-----
--------
-------
----
-----------
-----------
----------- -------------------------------------
-----
----
-----------
-----------
----------- -------------------------------------
-----
----
-----------
-----------
----------- -------------------------------------
-----
- ----------------------------------------------------------- --------
----------------------------------------------------------------------------------