带有ajax调用的斑马表

【问题标题】：zebra table with ajax call带有ajax调用的斑马表
【发布时间】：2012-04-06 13:54:35
【问题描述】：

我正在使用 ajax 按钮将记录添加到表中。我想用斑马桌。我有一个用于斑马表的 jquery 函数。

<script type="text/javascript">
        $(function() {
            $("table tr:nth-child(even)").addClass("zebraTable");
        });
</script>

CSS：

.zebraTable {background-color: #F2F2F2}

当我点击普通按钮时，它就像斑马桌一样工作。但是当我用 ajax 按钮更改按钮时，表格变成了普通表格。你有什么想法吗？

【问题讨论】：

您有可以为按钮和表格源提供的代码示例吗？
你不再需要 javascript 来做那种表了。你应该直接把它放在你的css中w3.org/Style/Examples/007/evenodd.en.html

【解决方案1】：

答案取决于自从您将 zebraTable 类添加到行后，该表发生了什么。我假设您的 Ajax 调用正在修改表（替换它、添加/删除行、隐藏/显示行等）？

请注意，除非您将其删除，否则 DOM 中的 tr 对象将保留该类，并且选择器适用于隐藏和可见的 tr 对象。我的建议是从所有行中删除 zebraTable 类，然后重新应用它（如果你有隐藏的 tr 对象，请调整它们）。

【讨论】：

我刚刚更改了按钮类型。我使用了 ajax 按钮而不是按钮，然后斑马表不起作用。
啊，我想你的意思是一个执行 Ajax 的按钮。听起来像 Ajax 按钮来自第三方库，或者我的谷歌技能可能缺乏。无论如何，使用开发人员工具栏（IE/Firefox/Google 都有类似的东西）来查看表格的前后状态。这应该可以帮助您确定单击按钮后需要执行的操作。我的想法是按钮正在更改 DOM 元素（保留 css 样式），而 Ajax 按钮正在添加/删除 DOM 元素（丢失 css 样式）。