如何使用JQuery遍历表格、获取首行ID并修改第五个TD内容

针对你的需求，用JQuery可以简洁完成，直接上代码和拆解说明：

核心代码 #

// 遍历表格内的所有tbody
$('#thisTable tbody').each(function() {
  // 获取当前tbody下的第一行
  const targetRow = $(this).children('tr:first');
  // 获取该行的ID
  const rowId = targetRow.attr('id');
  // 打印ID方便调试（可删除）
  console.log('当前行ID:', rowId);
  // 修改第五个TD的内容（注意:eq()索引从0开始，第五个对应索引4）
  targetRow.find('td:eq(4)').text('你的新内容');
});

代码逐行解释 #

• $('#thisTable tbody')：精准选中ID为thisTable的表格下所有<tbody>节点
• .each(function() { ... })：循环处理每个tbody，回调里的$(this)指代当前正在处理的tbody
• $(this).children('tr:first')：直接获取当前tbody的第一个子元素tr（比find更高效，因为只找直接子节点）
• targetRow.attr('id')：提取该行的id属性值
• targetRow.find('td:eq(4)')：定位到该行的第五个td元素（JQuery的:eq()选择器从0开始计数）
• .text('你的新内容')：将td的文本内容替换为指定值；如果需要插入HTML内容，改用.html('<span>带样式的内容</span>')即可

健壮性优化版 #

如果担心有些行可能没有ID，可以加个判断，避免无意义的操作：

$('#thisTable tbody').each(function() {
  const targetRow = $(this).children('tr:first');
  const rowId = targetRow.attr('id');
  
  if (rowId) { // 仅当行存在ID时执行修改
    targetRow.find('td:eq(4)').text(`已更新，行ID：${rowId}`);
  }
});

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