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()使用and event delegationto closest existing parentordocument本身会更好。

$(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

我看不出来.live()，而且你首先使用background-color，剩下的你只使用background..这可能是问题吗？

于 2013-02-26T06:58:15.193 回答
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()事件的“悬停”，但只有一个事件处理函数：

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

     }
);

因此，或者，您可以提供两个函数，一个用于 mouseenter，另一个用于 mouseleave，正如我在上面写的那样。

于 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 
$('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 回答