Question

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

表格创建：

 <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对于呼叫暂停：

    $('#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/

Answer 2

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

Answer 3

一种简单的方法是在具有数据的行上添加一个类并执行此操作：

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

Answer 4

您可以使用CSS方法（没有jQuery事件绑定）

$('#asdf tr').each(function(){
 if($.trim($(this).text()) == ''){
   $(this).addClass('hover-disabled');
 }
});

tr{ background-color: #FFF;}
tr:hover{ background-color: #AAA;}

tr.hover-disabled:hover{background-color: #FFF;}
//Must be defined in that order

Answer 5

尝试这个

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

Answer 6

试试这个：

$('#asdf tr:has(td:not(:empty))').mouseover(function() {
    $(this).addClass('hovered');
}).mouseout(function() {
    $(this).removeClass('hovered');
});

DEMO

Answer 7

使用此代码可以防止突出显示空行

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

使用悬停突出显示Html表

7 个答案: