Check a table row cell for contents

Question

I want to use jQuery to check if the 2nd cell in each table row of a table contains any text, if the 2nd cell doesn't contain any text then set the table row to display: none;

Whats the best way to go about this?

HTML:

<table id="results">
  <tr>
    <td>Results</td>
    <td>1000</td>
  </tr>
  <tr>
    <td>Description</td>
    <td></td> <!-- This cell is empty so hide row -->
  </tr>
  <tr>
    <td>Time/Date</td>
    <td>14:03 22/01/12</td>
  </tr>  
</table>

Answer 1

看一下：empty选择器 ：

$('table tr').has('td:empty:nth-child(2)').hide()

Answer 2

$('table tr').each(function() {
    if(!$(this).find('td').eq(1).html().length) {
        $(this).hide();
    }
});

This will loop through each tr , find the second element using $.eq(1) (arrays start from zero) and see if it contains anything using $.html().length . If it's empty, it hides the tr with $(this).hide() .

Answer 3

a simple solution, make use of :empty selector

$("#results tr").find('td:eq(1):empty').parent().hide();

fiddle : http://jsfiddle.net/GHg7f/2/