Question

For the table below, row2 and row3 have more than 1 empty cell(<td></td>), how can I use jQuery to check if each row in the table have more than 1 empty cell, than hide that row accordingly?

UPDATED:

If I want to check if each row(td) contain more than ONE cell(td) that is containing JUST witespace, than hide that row?

Thanks

<table>
<tr class="row1">
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
</tr>
<tr class="row2">
<td>a</td>
<td>b</td>
<td></td>
<td></td>
</tr>
<tr class="row3">
<td></td>
<td></td>
<td>c</td>
<td></td>
</tr>
...
<tr class="row100">
<td>a</td>
<td>b</td>
<td>c</td>
<td></td>
</tr>
</table>

Answer 1

In actual use, “empty” cells often contain all kinds of whitespace. EG: <td> </td>, <td> \n </td>, <td>&nbsp;</td>, <td class="Invalid"></td>, etc.
See how easy it is to break?

A more robust solution handles real-life HTML:

$('table tr').filter ( function () {
    var blankCells  = $(this).html ().match (/<td[^<>]*>(?:\s|&nbsp;)*<\/td>/ig);
    var numBlank    = blankCells ? blankCells.length : 0;
    return numBlank > 1;
} ).hide ();

See the demo at jsFiddle.

Note that this solution is probably fine for most practical cases, but since it uses regex to parse the DOM (even a little), it could end up showing extra rows if the HTML was coded poorly.