jquery - 使用悬停突出显示 Html 表

Question

我使用以下代码创建三行表。第一行和第三行包含数据。但是第二行本身不能有数据。我使用悬停方法可以正确选择行。但是我没有需要选择空行。这意味着如果我将鼠标悬停在空行上，它也会被选中。如何防止突出显示空行？

表创建:

 <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 调用悬停:

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

鼠标悬停方法:

   .hovered td {
        background: #ddd;
    }

Click Here for Live Demo

Answer 1

使用 .text() 检查你的“空”行

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

http://jsfiddle.net/hy93J/