如何让一个函数适配表格所有行？现有单行代码求优化方案

当然不用为每一行重复编写相同的代码！这种冗余写法不仅增加代码量，还会让后续维护变得麻烦。我们有两种更优雅的解决方案，根据你的表格是**静态（固定行数）还是动态（会新增/删除行）**来选择：

方案一：事件委托（推荐，支持动态行） #

事件委托的核心思想是把事件绑定到父元素（比如表格的tbody），而不是每个子元素上。当事件触发时，通过事件目标来判断是哪个子元素被点击，这样哪怕后续动态添加新行，也不需要重新绑定事件。

示例代码：

// 给tbody绑定点击事件，监听每行的第一个div
$('#res1 tbody').on('click', 'td div:first-child', function() {
  // 获取当前点击的div所在的行
  const $currentRow = $(this).closest('tr');
  
  // 从当前行中获取需要的元素，不用再写全局选择器
  const $secondDiv = $currentRow.find('td div:nth-child(2)');
  const $thirdDiv = $currentRow.find('td div:last-child');
  const $lastP = $currentRow.find('td:last-child');
  
  // 重置lastP的文本（对应你代码里的count = lastP.text(0)）
  $lastP.text(0);
  
  // 这里写你的six = ... 逻辑，比如：
  // six = someValue;
});

// 同理，给每行的第二个div绑定点击事件
$('#res1 tbody').on('click', 'td div:nth-child(2)', function() {
  const $currentRow = $(this).closest('tr');
  // 你的业务逻辑
});

方案二：遍历所有行（适合静态表格） #

如果你的表格是固定行数、不会动态修改的，可以直接遍历每一行，为每行的元素绑定事件，这样代码结构更直观：

// 遍历tbody下的所有行
$('#res1 tbody tr').each(function() {
  const $row = $(this);
  // 从当前行获取所需元素
  const $firstDiv = $row.find('td div:first-child');
  const $secondDiv = $row.find('td div:nth-child(2)');
  const $thirdDiv = $row.find('td div:last-child');
  const $lastP = $row.find('td:last-child');

  // 初始化lastP文本
  $lastP.text(0);

  // 给第一个div绑定点击事件
  $firstDiv.click(function() {
    // 直接使用当前行的变量，比如操作$secondDiv、$thirdDiv等
    // six = ...;
  });

  // 给第二个div绑定点击事件
  $secondDiv.click(function() {
    // 你的业务逻辑
  });
});

为什么这两种方式更好？ #

• 减少冗余代码：不用复制粘贴相同的选择器和事件逻辑
• 易维护：如果需要修改选择器或逻辑，只需要改一处
• 事件委托支持动态行：新增行时自动生效，不需要重新绑定事件
• 性能更优：事件委托只绑定一个事件到父元素，而不是给每个子元素都绑定事件

内容的提问来源于stack exchange，提问作者Mr WebDev