如何使用jQuery自动补全表格中<tr>缺失的<td>标签？

嗨，这个需求很常见，用jQuery可以轻松搞定～我给你准备了两种实用方案，你可以根据自己的实际场景来选：

方案一：动态适配表格的最大列数（推荐） #

如果你的表格列数不固定，想自动以表格里列数最多的那一行为标准补全缺失的<td>，可以用这个方法：

// 选中你的目标表格（如果有多个表格，建议给表格加类名，比如$('.my-table')）
const $targetTable = $('table');

// 先算出表格里所有行中，包含<td>最多的数量（也就是表格的总列数）
const maxColumnCount = Math.max(...$targetTable.find('tr').map(function() {
  return $(this).find('td').length;
}).get());

// 遍历每一行，补全缺失的<td>
$targetTable.find('tr').each(function() {
  const $currentRow = $(this);
  const currentTdCount = $currentRow.find('td').length;
  // 计算需要补充的<td>数量
  const needAddCount = maxColumnCount - currentTdCount;

  if (needAddCount > 0) {
    // 循环添加<td>，这里你可以自定义<td>的内容，比如示例里的---或者空内容
    for (let i = 0; i < needAddCount; i++) {
      $currentRow.append('<td>---</td>');
    }
  }
});

代码说明： #

• 首先通过map和Math.max拿到表格的最大列数，确保补全后所有行的列数统一；
• 遍历每一行时，对比当前行的<td>数量和最大列数，差多少就补多少个<td>；
• 如果你需要补空的<td>，把'<td>---</td>'改成'<td></td>'就行。

方案二：固定列数补全 #

如果你已经明确知道表格应该有多少列（比如示例里的3列），可以直接写死列数，代码会更简洁：

// 提前设定好表格的固定列数
const fixedColumnCount = 3;

// 遍历表格里的每一行
$('table tr').each(function() {
  const $currentRow = $(this);
  const currentTdCount = $currentRow.find('td').length;
  const needAddCount = fixedColumnCount - currentTdCount;

  if (needAddCount > 0) {
    for (let i = 0; i < needAddCount; i++) {
      $currentRow.append('<td>---</td>');
    }
  }
});

额外提示： #

如果你的表格包含表头<th>，想要把表头的列数也纳入计算标准，只需要把代码里的find('td')改成find('td, th')就行，这样表头的列数也会被用来计算最大列数，更准确哦～

备注：内容来源于stack exchange，提问作者3Code