Highlight the Html Table using Hover

Question

I use the following code for create table with Three Rows.First and third row Contains the data.But the second row Can,t have the data itself.I use the hover method the Rows can be selected properly.But i no need to select the Empty Row.That means if i mouseover the empty row it will also selected.How to prevent the highlight Empty rows?

Table Creation:

 <table id="asdf">
     <tbody>
      <tr>
        <td>Lorem</td> <td>Ipsum</td> <td>Fierent</td>
      </tr>
      <tr>
          <td style="height:10px" colspan=3></td>
      </tr>
      <tr>
        <td >mnesarchum ne </td> <td >sapientem</td> <td >fierent mnesarchum </td>
      </tr>
     </tbody>
    </table>

Jquery For call hovered:

    $('#asdf tr').mouseover(function() {
        $(this).addClass('hovered');
    }).mouseout(function() {
        $(this).removeClass('hovered');
    });

Mouse over method:

   .hovered td {
        background: #ddd;
    }

Click Here for Live Demo

Answer 1

Check your 'empty' row using .text()

$('#asdf tr').mouseover(function() {
    if($.trim($(this).text()) != '')
       $(this).addClass('hovered');
}).mouseout(function() {
    $(this).removeClass('hovered');
});​

http://jsfiddle.net/hy93J/