0

私はjqueryを使用しています。通常の状態$(document).readyでは、テーブルの行と列が強調表示されています。しかし、テーブルを使用してデータを呼び出すと$.ajax({})、行と列が強調表示されません。

私のコードは単にこのように

$('table td').hover( function() {
     $(this).css('background-color','white'); 
     $(this).siblings().css('background','#F0F8FF'); 
     var ind = $(this).index(); 
     $('table td:nth-child('+(ind+1)+')').css('background','#F0F8FF');
}, function() { 
     $('table td').css('background','white');
}).click( function() { 
     $(this).css("background","#9DFF9D");
});

解決策を知っている人はいますか..？

ライブコードで

$('table td').live("hover",function() {
        $(this).css('background-color','white');
        $(this).siblings().css('background','#F0F8FF');
        var ind = $(this).index();
        $('table td:nth-child('+(ind+1)+')').css('background','#F0F8FF');
    });

私は解決策を見つけました

私はこのような関数を作成します

function HighlightTable(){
    //table hover column & row highlight    
    $('table td').hover(function() {
        $(this).css('background-color','white');
        $(this).siblings().css('background','#F0F8FF');
        var ind = $(this).index();
        $('table td:nth-child('+(ind+1)+')').css('background','#F0F8FF');
    },function(){
        $('table td').css('background','white');
    }).click(function(){$(this).css("background","#9DFF9D");});
}

$.ajax呼び出されたときにHighlightTable() onsuccess条件を使用する

$.ajax({
   url:'something.php'
   success: function(data){
      $('div').html(data); HighlightTable();
   }
})

以上です、ありがとうございました

4

5 に答える 5

2

.on()とまたはそれ自体を使用する方が良いでしょうevent delegation。closest existing parentdocument

$(document).on('hover', 'table td', function() {
     $(this).css('background-color','white'); 
     $(this).siblings().css('background','#F0F8FF'); 
     var ind = $(this).index(); 
     $('table td:nth-child('+Math.floor(ind+1)+')').css('background','#F0F8FF');
 }, function() { 
     $('table td').css('background','white');
 }).click( function() { 
     $(this).css("background","#9DFF9D");
 });
于 2013-02-26T07:19:57.090 に答える
0

.hover()独自のハンドラーがあります：http：//api.jquery.com/hover/

複数のことをしたい場合は、次の.on()ようにハンドラーでそれらをチェーンします。

$(document).on(
{
    mouseenter: function() 
    {
        //stuff to do on mouseover
    },
    mouseleave: function()
    {
        //stuff to do on mouseleave
    }
}
, '.selector'); //pass the element as an argument to .on

jQueryはイベントの「ホバー」をサポートしていlive()ますが、イベントハンドラー関数は1つだけです。

$("document").live("hover",
     function()
     {

     }
);

あるいは、上記で書いたように、mouseenter用とmouseleave用の2つの関数を提供することもできます。

于 2013-02-26T07:42:03.593 に答える
0

これを試して：

$(document).on({ 
    mouseenter: 
       function() 
       { 
       $(this).css('background-color', 'white');
       $(this).siblings().css('background-color', '#F0F8FF');
       var ind = $(this).index();
       $('table td:nth-child(' + (ind + 1) + ')').css('background-color', '#F0F8FF');
       }, 
    mouseleave: 
       function() 
       { 
       $('table td').css('background-color', 'white');
       } ,
    click:
       function() 
       { 
        $(this).css("background-color", "#9DFF9D");
       } ,
   }, "table td"
);

サンプルhttp://jsfiddle.net/7pvpJ/を参照

于 2013-02-26T07:45:12.367 に答える
0

いいえ.live()、最初は使用background-colorし、残りは使用するだけbackgroundです..それが問題になることはありますか?

于 2013-02-26T06:58:15.193 に答える
0 
$('table td').on("hover",function() {
    $(this).css('background-color','white');
    $(this).siblings().css('background','#F0F8FF');
    var ind = $(this).index();
    $('table td:nth-child('+(ind+1)+')').css('background','#F0F8FF');
});

このコードを確認してください。

于 2013-02-26T06:59:22.820 に答える