1

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

表创建：

 <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;
    }

点击这里进行现场演示

4

7 回答 7

1

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

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

http://jsfiddle.net/hy93J/

于 2012-07-24T05:18:52.790 回答
0 
$('#asdf tr:not(:empty)').mouseover(function() {
    $(this).addClass('hovered');
}).mouseout(function() {
    $(this).removeClass('hovered');
});
于 2012-07-24T05:14:01.880 回答
0

一种简单的方法是将类添加到具有数据的行上并执行以下操作：

$('#asdf tr.has-data').mouseover(function() {
    $(this).addClass('hovered');
}).mouseout(function() {
    $(this).removeClass('hovered');
});
于 2012-07-24T05:15:22.757 回答
0

您可以使用 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
于 2012-07-24T05:23:40.920 回答
0

试试这个

$('#asdf tr:first,#asdf tr:last').mouseover(function() {
    $(this).addClass('hovered');
}).mouseout(function() {
    $(this).removeClass('hovered');
});​
于 2012-07-24T05:25:17.353 回答
0

试试这个：

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

演示

于 2012-07-24T05:30:48.210 回答
0

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

$('#asdf tr').mouseover(function() {
        if (!$.trim($(this).text()))$(this).removeClass('hovered')
        else $(this).addClass('hovered');   
    }).mouseout(function() {
        $(this).removeClass('hovered');
    });
于 2012-07-24T05:36:59.723 回答