Question

我正在使用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();
   }
})

这就是全部，谢谢你们。

Answer 1

最好将.on()和event delegation用于closest existing parent或document本身。

$(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");
 });

Answer 2

我看不到.live()，而且您首先使用background-color，其余只使用background ..这可能是问题吗？

Answer 3

$('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');
});

检查此代码。

Answer 4

.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支持“{1}}事件的”悬停“，但只支持一个事件处理函数：

live()

所以另外，你可以提供两个函数，一个用于mouseenter，一个用于mouseleave，正如我在上面写的那样。

Answer 5

试试这个：

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

jquery生活条件不起作用

5 个答案: