Question

我有一个动态填充表格，并希望添加鼠标悬停功能

(mouseover="style.backgroundColor='#E1EBF4'")

在添加数据行时

到我的表行。

function addRecentData(data) {
   $('#newTable tr:last').after('<tr><td class="name"></td><td class="id"></td></tr>');
   var $tr = $('#newTable tr:last');
   $tr.find('.name').html(data.Name);
   $tr.find('.id').html(data.Id);
}

Answer 1

编辑：请注意，如果您不关心IE6支持，可以使用CSS :hover伪选择器来更改背景。这应该是第一个考虑因素。

#newTable tr:hover {
    background: #E1EBF4;
}

根据您当前的代码，您可以使用$tr对表格的引用：

function addRecentData(data) {
   $('#newTable tr:last').after('<tr><td class="name"></td><td class="id"></td></tr>');
   var $tr = $('#newTable tr:last');
   $tr.find('.name').html(data.Name);
   $tr.find('.id').html(data.Id);
   $tr.mouseover(function() {
       $(this).css('backgroundColor','#E1EBF4');
       // this.style.backgroundColor = '#E1EBF4';  // or you could do this
   });
}

另一种方法是使用inserAfter()代替after()，并立即分配变量。

function addRecentData(data) {
   var $tr = $('<tr><td class="name"></td><td class="id"></td></tr>')
                   .insertAfter('#newTable tr:last');
   $tr.find('.name').html(data.Name);
   $tr.find('.id').html(data.Id);
   $tr.mouseover(function() {
       $(this).css('backgroundColor','#E1EBF4');
       // this.style.backgroundColor = '#E1EBF4';  // or you could do this
   });
}

或者如果每个<tr>都应该使用鼠标悬停，您可以使用.delegate()上的#newTable来处理鼠标悬停。

$('#newTable').delegate('tr', 'mouseover', function() {
    $(this).css('backgroundColor','#E1EBF4');
    // this.style.backgroundColor = '#E1EBF4';  // or you could do this
});

现在<tr>元素会在添加到表格时自动获得所需的功能。

http://api.jquery.com/delegate/

Answer 2

你应该坚持通过jQuery添加你的事件。您可以使用.live()事件绑定方法将事件处理程序放在之前添加行。此外，如果你想要一个悬停效果，你最好使用 mouseenter 和 mouseleave ，jQuery为那些还没有支持它的浏览器提供：

$('#newTable tr').live('mouseenter', function () {
    $(this).css('backgroundColor', '#E1EBF4');
}).live('mouseleave', function () {
    $(this).css('backgroundColor', '');
});

当动态添加时，这比绑定到每个单独元素更有效。

Answer 3

如前所述，您可以使用.live

$('#newTable tr').live('mouseenter', function() {
  $(this).css('background','#E1EBF4');
}).live('mouseleave', function() {
  $(this).css('background','');
});

确保你在行上使用mouseenter和mouseleave，而不是mouseover / mouseout，或者当进出子元素时它会触发，你会看到背景的闪烁来回变化。

如何在jquery中的行上添加mouseover事件？

3 个答案: