JavaScript如何判断HTML表格行元素为空 避免向表格追加空行

在追加第三行前增加空行校验逻辑即可，空行时直接跳过追加操作。

• 校验核心逻辑：遍历待判断行的所有单元格，若所有单元格去除首尾空白后无有效文本，且不存在输入框、图片、按钮这类功能性内容元素，即可判定为空行。

完整修改后的代码如下：

const element = document.getElementById("two_weeks");
// 先追加确定有有效内容的前两行
element.appendChild(tble_row);
element.appendChild(tble_row2);

// 校验第三行是否为空
const isEmptyRow = Array.from(tble_row3.cells).every(cell => {
  // 提取单元格文本，去除首尾空白（包括空格占位符 生成的空白字符）
  const textContent = cell.textContent.trim();
  // 检查单元格内是否存在表单、图片等非文本类有效内容
  const hasValidElement = cell.querySelector('input, select, textarea, button, img');
  return textContent === '' && !hasValidElement;
});

// 仅当行非空时执行追加
if (!isEmptyRow) {
  element.appendChild(tble_row3);
}

补充说明：如果你的业务场景里第三行可能是连<td>/<th>单元格都没有的完全空行，上述逻辑也能正常识别——此时tble_row3.cells长度为0，every方法会直接返回true判定为空行，不会执行追加。如果不需要校验非文本类元素，删掉hasValidElement相关判断即可。

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