使用 jQuery 更新动态/ajax 表行的替代颜色答案

【问题标题】：Updating alternate colors of dynamic/ajax table rows with jQuery使用 jQuery 更新动态/ajax 表行的替代颜色
【发布时间】：2011-05-26 15:12:45
【问题描述】：

找了很多，但找不到，通过 jQuery 在$(document).ready 事件上应用备用行颜色。

$(document).ready(function(){  

    //Member Directory Table  
    $('.MemberDetail table tr:odd ').css('background','#F0F0EC');  
}

应用了颜色，但是当使用 ajax 请求更新表格时，它不会更新颜色。那么，将替代颜色应用于该表的更好方法是什么？

这个页面上有一个例子：

Here Dynamic Table

【问题讨论】：

标签： jquery ajax html-table row alternate

【解决方案1】：

您应该在 Ajax 完成时使用此脚本。我的意思是像

$.ajax({
  url: 'ajax/test.html',
  success: function(data) {
    //to do your jQuery code again;
    $('.MemberDetail table tr:odd ').css('background','#F0F0EC');
  }
});

【讨论】：

【解决方案2】：

再次更新表格：

$('.MemberDetail table').find('tr:odd').css('background','#F0F0EC').end().find('tr:even').css('background','#fff');

没有神奇的方法可以自动维护这些颜色，只需在每次更新表格时更新即可。

【讨论】：

【解决方案3】：

在 ajax 请求之后，您必须再次执行表格颜色函数

function ajax() {
doAjaxStuff();

$('.MemberDetail table tr:odd ').css('background','#F0F0EC');
}

【讨论】：

【解决方案4】：

如果您使用像这样的CSS 类，例如：

.alternate
{
    background: #e6f4ff;
}

要将替代颜色应用于表格行，更容易......在做了一些jQuery 动态添加表格行之后，您可以执行以下操作：

$("table tbody tr").removeClass("alternate").filter(":odd").addClass("alternate");

无论您做什么，这都应该保持行颜色正确：添加或删除 <table> 行。

请记住，每次修改 <table> 时，您都必须始终运行代码。

【讨论】：