如何正确获取表格中点击按钮所在行的索引？

我来帮你搞定这个问题！你用PHP动态生成了表格，现在想要获取点击Delete按钮时所在的行索引，这里有几种可靠的实现方式：

方法1：纯JavaScript实现 #

这种方法不需要依赖任何库，直接利用原生DOM API就能搞定：

// 给所有删除按钮绑定点击事件
document.querySelectorAll('.delbuttons .btn').forEach(button => {
  button.addEventListener('click', function() {
    // 向上找到最近的<tr>元素（不管按钮嵌套多少层）
    const targetRow = this.closest('tr');
    // 获取行索引（rowIndex从0开始计数）
    const rowIndex = targetRow.rowIndex;
    
    // 如果你需要从1开始计数的索引
    const rowNumber = rowIndex + 1;
    
    console.log(`当前行索引（从0开始）：${rowIndex}`);
    console.log(`当前行序号（从1开始）：${rowNumber}`);
    
    // 顺带提一句：你还能直接拿到按钮上的数据库id
    const dbId = this.id;
    console.log(`当前行对应的数据库ID：${dbId}`);
  });
});

方法2：jQuery实现（适合已引入Bootstrap的场景） #

因为你的按钮用了Bootstrap的modal，大概率项目里已经引入了jQuery，用它来实现会更简洁：

// 用事件委托绑定，确保动态生成的按钮也能触发事件
$(document).on('click', '.delbuttons .btn', function() {
  // 找到所在的<tr>并获取索引（index()默认从0开始）
  const rowIndex = $(this).closest('tr').index();
  // 从1开始的序号
  const rowNumber = rowIndex + 1;
  
  console.log(`当前行索引（从0开始）：${rowIndex}`);
  console.log(`当前行序号（从1开始）：${rowNumber}`);
  
  // 获取数据库ID
  const dbId = $(this).attr('id');
  console.log(`当前行对应的数据库ID：${dbId}`);
});

注意事项：表格包含thead时的处理 #

如果你的表格有<thead>表头行，上面的方法会把表头行也算入索引。如果你只需要统计<tbody>内的行索引，可以这样调整：

纯JS版本 #

button.addEventListener('click', function() {
  const targetRow = this.closest('tr');
  const tbody = targetRow.closest('tbody');
  // 把tbody下的所有行转成数组，再找当前行的位置
  const allTbodyRows = Array.from(tbody.querySelectorAll('tr'));
  const tbodyRowIndex = allTbodyRows.indexOf(targetRow);
  
  console.log(`tbody内的行索引（从0开始）：${tbodyRowIndex}`);
});

jQuery版本 #

$(document).on('click', '.delbuttons .btn', function() {
  const tbodyRowIndex = $(this).closest('tr').index('tbody tr');
  console.log(`tbody内的行索引（从0开始）：${tbodyRowIndex}`);
});

这些方法都能完美适配你动态生成的表格，不管按钮嵌套在多少层DOM元素里，closest()方法都能精准找到所在的行元素～

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