1

次のコードを使用して、3 つの行でテーブルを作成します。1 行目と 3 行目にはデータが含まれています。しかし、2 行目にはデータ自体を含めることができません。つまり、空の行にマウスオーバーすると、それも選択されます。空の行が強調表示されないようにする方法は?

テーブルの作成:

 <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 ホバリング:

    $('#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').mouseover(function() {
        if (!$.trim($(this).text()))$(this).removeClass('hovered')
        else $(this).addClass('hovered');   
    }).mouseout(function() {
        $(this).removeClass('hovered');
    });
于 2012-07-24T05:36:59.723 に答える
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:has(td:not(:empty))').mouseover(function() {
    $(this).addClass('hovered');
}).mouseout(function() {
    $(this).removeClass('hovered');
});

デモ

于 2012-07-24T05:30:48.210 に答える
0

これを試してください

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