如何用JavaScript为表格中空的<td>标签填充0值

原生JavaScript实现 #

直接选中页面中所有<td>元素，遍历检查内容是否为空（包括仅含空白字符的情况），如果是则填充0：

// 获取所有td元素
const tds = document.querySelectorAll('td');

// 遍历每个td
tds.forEach(td => {
  // 去除前后空白字符后判断是否为空
  if (td.textContent.trim() === '') {
    td.textContent = '0';
  }
});

如果只想针对某个特定表格处理（比如带data-table属性的表格），可以缩小选择范围：

const targetTable = document.querySelector('table[data-table="target"]');
const tds = targetTable.querySelectorAll('td');

tds.forEach(td => {
  if (td.textContent.trim() === '') {
    td.textContent = '0';
  }
});

jQuery实现（如果项目已引入jQuery） #

如果你的项目用了jQuery，代码会更简洁：

// 处理所有空td
$('td').filter(function() {
  return $(this).text().trim() === '';
}).text('0');

// 仅处理指定表格内的空td
$('#your-table-id td').filter(function() {
  return $(this).text().trim() === '';
}).text('0');

补充说明 #

• 用trim()是为了处理那些看起来是空但实际包含空格、换行符的<td>标签，如果你只想严格处理<td></td>这种完全空的标签，去掉trim()即可。
• 如果需要在表格动态加载内容后执行这段代码，把逻辑放到内容加载完成的回调里（比如AJAX成功回调、DOMContentLoaded事件）。

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