javascript - 如何使用 jQuery 将静态内容添加到空单元格

Question

这是一个示例表

<table width="580" height="217" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td width="334">Website</td>
    <td width="246">Category</td>
  </tr>
  <tr>
    <td>http://www.google.com</td>
    <td>Search Engine</td>
  </tr>
  <tr>
    <td>http://www.gmail.com</td>
    <td>Web Mail</td>
  </tr>
  <tr>
    <td>http://www.xyz.com</td>
    <td></td>
  </tr>
  <tr>
    <td>http://www.amazon.com</td>
    <td>Shopping</td>
  </tr>
  <tr>
    <td>http://www.website.com</td>
    <td></td>
  </tr>
</table>

此表中有两个单元格为空，我如何使用 jquery 在这些空单元格中添加“未找到”文本？

Answer 1

$('table td:empty').append('Not Found');

<强> Demo here

请注意，选择器 :empty 表示没有子节点，包括文本节点，因此请注意 html 的布局方式，因为在新行上布置开始和结束标记可能会将文本节点子节点引入您所认为的空单元格。解决这个问题的一个基本方法是定义我们自己的选择器表达式

(function ($) {

    $.extend($.expr[':'],{
        reallyEmpty: function(elem) {
            return !elem.firstChild ||
               elem.firstChild.nodeType === 3 && !!/^\s|\n$/.test(elem.firstChild.textContent);
        }
    });

})(jQuery);

然后使用这个

$('td:reallyEmpty').append('Not Found');