jQuery遍历多表格为td添加data-label时表头混淆问题求助

你的代码在多表格场景下出现data-label被最后一个表格表头覆盖的问题，核心原因有两个：

• thcount和eachth未声明为局部变量，成为全局变量后会被后续表格的遍历操作覆盖值
• 选择td元素时没有限定在当前表格范围内，会选中页面所有表格的对应列，最终被最后一个表格的表头覆盖所有属性

修正后的代码 #

$('table').each(function() { 
  const $table = $(this); // 缓存当前表格对象，限定操作范围
  const thLength = $table.find('th').length;
  if (thLength > 1) { 
    let thcount = 0; // 声明为局部变量，避免全局污染
    $table.find('th').each(function() {
      const eachth = $(this);  
      thcount++;     
      // 仅在当前表格内查找对应列的td
      $table.find('tr td:nth-child('+thcount+')').each(function() {
        if (eachth.html().trim() === '') {
          $(this).css('padding-left', '6px');
        } else {
          $(this).attr('data-label', eachth.html() + ' '); 
        }
      });
    });
  }
}); 

关键修改说明 #

• 用const缓存当前表格对象$table，所有元素查找都基于这个对象，确保只操作当前表格内的内容
• 给thcount和eachth添加let/const声明，转为局部变量，每个表格的遍历过程互不干扰
• 将全局的$('tr td:nth-child(...)')改为$table.find(...)，严格限定查找范围
• 增加trim()处理表头内容，避免空表头的误判

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