Question

Here’s a sample table

<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>

Two cells are empty in this table, how can i use jquery to add “not found” text in those empty cells?

Answer 1

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

Demo here

Note that the selector :empty means no children, including text nodes, so watch how your html is laid out as laying out the opening and closing tags on new lines may introduce a text node child into what you consider an empty cell. A basic way to combat this could be to define our own selector expression

(function ($) {

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

})(jQuery);

and then use this

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