使用jQuery/Javascript批量标记空表格单元格失败求助

你的代码问题出在哪 #

• jQuery部分：$("td").html()只会获取第一个<td>的内容做判断，不会遍历所有单元格，没法批量处理空单元格。
• 原生JS部分：错误选中了<tr>元素，还判断行的数量是否为0，逻辑完全偏离空单元格的处理需求。

两种可行的解决方法 #

用jQuery实现 #

方法A：遍历所有单元格（兼容含空白字符的空单元格）

如果空单元格里可能存在空格、换行这类空白字符，用这个方法更稳妥：

$("td").each(function() {
  // 去除内容首尾空白后判断是否为空
  if ($.trim($(this).text()) === '') {
    $(this).text('empty cell');
  }
});

方法B：直接匹配空单元格（仅适用于完全无内容的单元格）

如果空单元格是完全空白（连空格都没有），可以用jQuery的:empty选择器一步到位：

$("td:empty").text('empty cell');

用原生JavaScript实现 #

不需要jQuery的话，原生JS也能轻松搞定：

// 获取所有<td>元素
const allTd = document.querySelectorAll('td');
// 逐个检查并处理空单元格
allTd.forEach(td => {
  if (td.textContent.trim() === '') {
    td.textContent = 'empty cell';
  }
});

替换后的完整示例代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Page title</title>
<style>
table, th, td { border: 1px solid black; } th { cursor: pointer; }
</style>
</head>
<body>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
        <tr><th>id</th><th>name</th><th>age</th></tr>
        <tr><td>1</td><td>Julian</td><td>31</td></tr>
        <tr><td></td><td>B</td><td></td></tr>
        <tr><td>3</td><td></td><td>25</td></tr>
        <tr><td>4</td><td>Mindy</td><td>32</td></tr>
        <tr><td>5</td><td id="dud"></td><td>40</td></tr>
    </table>
<script>
// 二选一即可，注释掉不用的方法
// jQuery方法示例
$("td").each(function() {
  if ($.trim($(this).text()) === '') {
    $(this).text('empty cell');
  }
});

// 原生JS方法示例
// const allTd = document.querySelectorAll('td');
// allTd.forEach(td => {
//   if (td.textContent.trim() === '') {
//     td.textContent = 'empty cell';
//   }
// });
</script>
</body>
</html>

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