如何不使用.find('td:eq(0)')获取表格行各列？求替代方法

我完全理解你不想用td:eq(n)这种硬编码索引的写法——一旦表格列的顺序调整，这类代码很容易直接失效，维护起来特别头疼。这里有几个更可靠的实现方式，结合你的现有代码来演示：

1. 给<td>添加语义化类名（最推荐） #

直接给存储特定数据的表格单元格加上有意义的类名，后续通过类名定位，完全和列顺序解绑，可读性也拉满。

首先修改你的HTML表格结构：

<tr>
  <td class="librarian-id">123</td>
  <td class="librarian-name">John Doe</td>
  <!-- 其他列 -->
  <td><button class="delete_librarian">Delete</button></td>
</tr>

然后调整JS代码：

$(document).on('click', '.delete_librarian', function() { 
  var librarianDataRow = $(this).closest('tr'); 
  var librarianId = parseInt(librarianDataRow.find('td.librarian-id').text()); 
  var librarianName = librarianDataRow.find('td.librarian-name').text(); 
  
  $('#confirm-model-body').text("Are you sure you want to delete "+librarianName+" data"); 
  $('#confirm-modal').modal({backdrop: 'static'}); 
  // 后续的确认按钮逻辑...
});

2. 使用HTML5 data-*属性 #

如果不想给单元格加类名，也可以用data-*属性标记单元格的用途，同样能灵活定位，还能统一复用标记规则：

HTML结构：

<tr>
  <td data-field="librarian-id">123</td>
  <td data-field="librarian-name">John Doe</td>
  <!-- 其他列 -->
  <td><button class="delete_librarian">Delete</button></td>
</tr>

JS代码修改：

$(document).on('click', '.delete_librarian', function() { 
  var librarianDataRow = $(this).closest('tr'); 
  var librarianId = parseInt(librarianDataRow.find('td[data-field="librarian-id"]').text()); 
  var librarianName = librarianDataRow.find('td[data-field="librarian-name"]').text(); 
  
  $('#confirm-model-body').text("Are you sure you want to delete "+librarianName+" data"); 
  $('#confirm-modal').modal({backdrop: 'static'}); 
  // 后续逻辑...
});

3. 通过表头<th>的文本间接定位（适合无法修改表格结构的场景） #

如果没法修改表格的HTML（比如是后端自动生成的），可以先找到对应表头的索引，再用这个索引获取单元格。这种方式比直接写死索引更健壮——只要表头文本不变，即使列顺序调整也能正常工作：

$(document).on('click', '.delete_librarian', function() { 
  var librarianDataRow = $(this).closest('tr'); 
  // 先找到表头中对应"ID"和"Name"的列索引
  var idColIndex = librarianDataRow.closest('table').find('th:contains("ID")').index();
  var nameColIndex = librarianDataRow.closest('table').find('th:contains("Name")').index();
  
  var librarianId = parseInt(librarianDataRow.find('td').eq(idColIndex).text()); 
  var librarianName = librarianDataRow.find('td').eq(nameColIndex).text(); 
  
  $('#confirm-model-body').text("Are you sure you want to delete "+librarianName+" data"); 
  $('#confirm-modal').modal({backdrop: 'static'}); 
  // 后续逻辑...
});

小提示 #

前两种方案（类名或data-*属性）是最推荐的，因为它们直接和数据语义绑定，完全不受表格结构变化的影响，代码可读性也更高。第三种方案属于“退而求其次”的选择，适合无法修改HTML结构的场景。

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