jQuery - 通过表格中的<tr>元素点击事件获取<td>元素的值

在前端开发中，使用jQuery库可以帮助我们更容易地操作DOM元素和处理用户交互。本文将介绍如何使用jQuery的click事件来捕获表格中的元素，并获取相关元素的值，以及一些实际应用场景。

准备工作

首先需要一个包含数据的HTML表格。以下是一个简单的示例：

-- -------------------- ---- -------
-------
   -------
      ----
         -----------
         -----------
         -----------
      -----
   --------
   -------
      ----
         -----------
         -----------
         ---------------
      -----
      ----
         -----------
         -----------
         ----------------
      -----
      ----
         -----------
         -----------
         ---------------
      -----
   --------
--------

实现方法

为了监听表格中的元素的点击事件，我们可以使用jQuery的on()方法。在这个例子中，我们将会把on()方法绑定到表格的元素上，以便于在点击任何一个元素时都能被触发。

$('table tbody').on('click', 'tr', function() {
   // 在这里获取<td>元素的值
});

接下来，我们需要在on()方法中添加一个回调函数。该回调函数将会触发每次点击事件，并且可以访问当前被点击的元素作为this对象。然后，我们可以使用jQuery的children()方法来获取该元素中所有的子元素。最后，我们将td元素的值存储到一个数组中。

$('table tbody').on('click', 'tr', function() {
   var tdValues = [];
   $(this).children().each(function() {
      tdValues.push($(this).text());
   });
   console.log(tdValues); // 打印出被点击的<tr>元素中所有<td>元素的文本内容
});

实际应用

现在，我们已经学会如何通过jQuery监听表格中的元素的点击事件并获取相关元素的值。那么，在实际应用中，我们可以将上述代码扩展到更多的场景中。以下是一些示例：

1. 高亮选中的行

$('table tbody').on('click', 'tr', function() {
   $(this).addClass('selected').siblings().removeClass('selected');
});

2. 显示选中行的详细信息

$('table tbody').on('click', 'tr', function() {
   var tdValues = [];
   $(this).children().each(function() {
      tdValues.push($(this).text());
   });
   var details = '姓名：' + tdValues[0] + '<br>年龄：' + tdValues[1] + '<br>地址：' + tdValues[2];
   $('.details').html(details);
});

3. 删除选中的行

$('table tbody').on('click', 'tr', function() {
   $(this).remove();
});

总结

在本文中，我们学习了如何使用jQuery监听表格中元素的点击事件，并获取相关元素的值。我们还介绍了一些实际应用场景，例如高亮选中的行、显示选中行的详细信息和删除选中的行。希望本文能够帮助读者更好地理解和运用jQuery库。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/30016