代码片段 → jQuery 代码片段 → jQuery 为表格添加斑马线效果 jQuery 为表格添加斑马线效果 Chris Coyier 于 2009年9月4日 发布 $("tr:odd").addClass("odd"); 然后使用一些 CSS .odd { background: #ccc; }
非常好！我不知道 :odd。每天都能学到新东西 :D
（但是，我会使用 :even（假设它存在），因为我想让第一行是“正常”颜色）。
好吧，你可以这样做
tr {background-color: #FFF;}我认为 .odd 会覆盖它，如果不是，你也可以始终为 :odd 的背景颜色添加 !important。
是的，.odd 类会覆盖它。
你太棒了，Chris，感谢你发布所有这些内容！
最好使用
$('tr:nth-child(odd)').addClass('odd');因为你的示例会计算所有表格行，而不考虑它们属于哪个表格。以上代码将始终以偶数行开始，即使它实际上是文档中的第 7 个表格行。
谢谢！这正是我要找的。
顶！这是我需要的实现，因为我在页面上有多个表格。这会在页面上的每个新表格中重新开始索引。谢谢！
我是新手。我尝试了代码，但没有效果。我能否获得使用该代码的完整示例？谢谢。
@dani，这里有一个简单的演示，详细解释了如何使用此代码，以及一个正在使用的实时示例。
http://webdesignandsuch.com/2010/08/add-zebra-striping-to-a-table-with-jquery/
为什么要使用 jQuery？CSS 可以做到这一点。
这就是我想的…
有原因吗？？？
是的，CSS 可以实现斑马线效果，前提是你有合适的 HTML 标记。为此目的使用 jQuery 可以减少标记的数量。此外，在使用 AJAX 在客户端动态添加或删除表格行并希望确保表格继续具有所需的斑马线效果时，为此目的使用 jQuery 很有帮助。例如，在添加或删除一行后，只需调用一个 jQuery 函数即可重新应用斑马线效果。
使用 jQuery 实现斑马线效果的另一个有用场景是在进行表格的客户端排序时。排序完成后，您需要将斑马线效果重新应用于表格行。
我喜欢使用 $(‘tbody tr:odd’) - 这样它就会查看 tbody，并且不会计算我的表头行，但这只是我个人的喜好。
我在很多地方都使用它，但试图了解斑马线或行高亮在大型表格中是否效果更好。如果您有兴趣，可以参与我的一项在线调查：http://access2learn.com/survey1/
谢谢。
如果您想在排序或删除行等操作后重置表格。需要两行代码。我想知道是否有人知道如何将其放入一个可以调用的函数中。例如 resetStripes() 之类的？
这是我目前正在使用的两行调用。
$(“.stripeme tbody tr”).removeClass(“alt”);
$(“.stripeme tbody tr:even”).addClass(“alt”);
谢谢，
Jana
我真的很喜欢这个技巧 - 它非常有用，节省了很多编程时间…
优秀。非常简单的解决方案。谢谢。
或者更准确地说……也就是说，如果您希望第一行/li 具有奇数类，则应执行
$(“tr:even”).addClass(“odd”);
（基于 0 的索引）
我只想说，仅使用 CSS 完全可行。
tr:nth-child(even) { background: #EBEBEB; color: #7D7D7D; }
tr:nth-child(odd) { background: #777777; color: #7D7D7D; }
如果需要，您可以定位特定的表格。（为您的表格添加类或 ID）
table.mytableclass tbody tr:nth-child(even) { background: #EBEBEB; color: #7D7D7D; }
table.mytableclass tbody tr:nth-child(odd) { background: #777777; color: #7D7D7D; }
或使用 ID
table#mytableclass tbody tr:nth-child(even) { background: #EBEBEB; color: #7D7D7D; }
table#mytableclass tbody tr:nth-child(odd) { background: #777777; color: #7D7D7D; }
向您致敬。:D
我不知道奇数伪元素，谢谢。
是的，你可以用纯 CSS 做到这一点，但如果想让它在 IE8 或更低版本中也能工作呢？
jQuery 或更长的 DOM 脚本使其能够工作。
感谢您提供创建斑马线样式的“最简单”想法。
现在，如何在不使用 jQuery 的情况下实现相同的效果？（除了将 class=”odd” 添加到所需的行！）
提前感谢。
您现在可以使用 tr:nth-child(2n)，它将选择每个偶数行。使用 tr:nth-child(2n-1) 将选择奇数行，tr:nth-child(3n) 将选择每三个 tr 中的一个。
感谢此页面！
如何为某些行具有“display:none”标签的表格添加斑马线效果？在某些情况下，我们需要隐藏某些行。但当我们这样做时，此斑马线效果会“条纹”未显示的行，导致表格看起来很奇怪。
您可以这样做，而不是更改 css 文件