如何为代码创建的表格行添加双击事件并传递该行作为函数参数

方法一：新增行时直接绑定事件 #

每次添加新行后，直接给该行绑定双击事件，在事件处理函数中通过this获取当前行并传入处理函数：

// 添加行的函数
function addRow() {
  const table = document.getElementById('target-table');
  const newRow = table.insertRow();
  
  // 填充单元格示例
  const cell = newRow.insertCell();
  cell.textContent = '新增行内容';
  
  // 绑定双击事件
  newRow.addEventListener('dblclick', function() {
    handleRowDoubleClick(this);
  });
}

// 双击事件处理函数，接收当前行作为参数
function handleRowDoubleClick(row) {
  // 这里可以对行进行操作，比如获取单元格内容
  console.log('双击的行：', row);
  console.log('行内第一个单元格内容：', row.cells[0].textContent);
}

方法二：事件委托（推荐） #

利用事件冒泡特性，只给表格父元素绑定一次事件，自动覆盖所有已存在和新增的行，无需重复绑定：

// 页面初始化时给表格绑定事件委托
document.getElementById('target-table').addEventListener('dblclick', function(e) {
  // 向上查找最近的<tr>元素，确保是表格行
  const targetRow = e.target.closest('tr');
  if (targetRow) {
    handleRowDoubleClick(targetRow);
  }
});

// 通用的双击处理函数
function handleRowDoubleClick(row) {
  console.log('双击的行：', row);
  // 执行你的业务逻辑
}

// 添加行函数无需处理事件绑定
function addRow() {
  const table = document.getElementById('target-table');
  const newRow = table.insertRow();
  const cell = newRow.insertCell();
  cell.textContent = '新增行内容';
}

旧行循环绑定的正确姿势 #

如果需要给已存在的行批量绑定事件，避免循环闭包问题，可采用以下方式：

// 获取所有表格行
const rows = document.querySelectorAll('#target-table tr');

// 方法1：使用forEach遍历
rows.forEach(row => {
  row.addEventListener('dblclick', () => {
    handleRowDoubleClick(row);
  });
});

// 方法2：使用let声明循环变量（块级作用域）
for (let i = 0; i < rows.length; i++) {
  rows[i].addEventListener('dblclick', function() {
    handleRowDoubleClick(this);
  });
}

内容的提问来源于stack exchange，提问作者Kairo Barillas