0

我正在使用 ajax 将 XML 加载到表中，并尝试执行“悬停”事件以在悬停进出表行时更改颜色。表格行是使用 AJAX 动态添加的。它不工作。以下是代码：

$(document).ready(function(){
    //$("tr").hover(function(){
    $("#tbl1").on("hover","tr",function(){
       $(this).attr('bgcolor', "yellow");
    },
    function(){
       $(this).attr('bgcolor', "white");
    });     
});

以下是页面加载时的表格

<table width="200" border="5" cellspacing="5" cellpadding="5" id="tbl1">
     <tr>
       <th scope="col">Index</th>
       <th scope="col">Matriks</th>
       <th scope="col">Name</th>
       <th scope="col">IC</th>
       <th scope="col">Age</th>
       <th scope="col">Photo</th>
     </tr>
</table>

提前感谢您的帮助

4

6 回答 6

0

使用这个功能

$("#tbl1 tr").live("hover",function(){
   $(this).attr('bgcolor', "yellow");
},
function(){
   $(this).attr('bgcolor', "white");
});
于 2013-07-20T06:30:04.507 回答
0

尝试这个

$(document).ready(function(){
    $("#tbl1").on("mouseenter","tr",function(){
       $(this).attr('bgcolor', "yellow");
    },
    function(){
       $(this).attr('bgcolor', "white");
    });     
});

hover 是 mouseenter 和 mouseleave 事件的简写形式。悬停本身不是一个事件。并且 .on('hover'.. 不是有效的语法。但是您可以直接使用 $("#tbl1 tr").hover(function() {}) 。

于 2013-07-20T06:31:05.560 回答
0

使用.css()代替.attr()

$(document).ready(function () {
    $("#tbl1 tr").hover(function () {
        $(this).css("background-color", "yellow");
    },

    function () {
        $(this).css("background-color", "white");
    });
});

检查这个JSFiddle

于 2013-07-20T06:35:12.157 回答
0

将鼠标悬停在 tr 上以突出显示 tr

工作演示http://jsfiddle.net/4SjZ7/1

$(document).ready(function () {
    $("#tbl1 tr").hover(function () {
        $(this).attr('bgcolor', "yellow");
    },
    function () {
        $(this).attr('bgcolor', "white");
    });
});

如果您想将鼠标悬停在表格上并突出显示此代码

工作演示http://jsfiddle.net/4SjZ7/3/

js

$(document).ready(function () {
    $("#tbl1").hover(function () {
        $('#tbl1 tr').attr('bgcolor', "yellow");
    },
    function () {
        $('#tbl1 tr').attr('bgcolor', "white");
    });
});
于 2013-07-20T06:35:44.983 回答
0

尝试这个：

$(document).ready(function() {
    $("#tbl1").on("mouseenter", "tr", function() {
        $(this).attr('bgcolor', "yellow");
    }).on("mouseleave", "tr", function() {
        $(this).attr('bgcolor', "white");
    });
});

jsFiddle

于 2013-07-20T06:36:26.830 回答
0

这似乎对我有用：http: //jsfiddle.net/Sde8J/2

$(document).ready(function(){

  $("#tbl1 tr").hover(
  function () {
    $(this).css("background-color", "yellow");
  },
  function () {
    $(this).css("background-color", "white");
  });
});
于 2013-07-20T06:37:37.980 回答