在奇数行和偶数行的表格中显示不同的背景颜色就像jQuery一样简单

制作表格时，往往需要使奇数行和偶数行显示不同的背景颜色，这样会使表格看起来更加美观，使同行数据搜索更快、更方便。我们通常如何实现这一点？就是给每个tr标签添加css样式。

代码如下：

htmlstyle type='text/css '。奇数{背景色：黄色；}.甚至{ background-color : red；}/stylebody表边框=' 1 ' Tr class=' odd ' tdNo . 1/TD TD TD 0001/TD/Tr Tr class='偶数' tdNo . 2/TD TD TD 0002/TD/Tr class=' odd ' tdNo . 3/TD TD TD 0003/TD/Tr class='偶数' tdNo。4/tdtd 0004/TD/tr/table/body/html显示效果：

但是如果表格有几百甚至上千行，背景代码不允许修改，只能修改前台页面，那么给每个tr元素添加css样式就比较困难了。有没有什么方法可以用最简单的方式达到同样的页面效果？答案是JQuery。

JQuery在控制标签方面非常强大，您可以通过选择器找到页面上的任何标签，并为其添加CSS样式。

只需导入JQuery的库文件，并添加以下四行代码。

$(文档)。ready(function() { $('tr:odd ')。addClass('奇数')；$('tr:even ')。addClass('偶数')；});简要解释选择器的用法：

$ ('tr ')代表遍历选择页面上的所有tr元素。$ ('tr:odd ')代表遍历选择页面上所有tr元素的奇数行。请注意，tr元素下标以0开头，tr[1]是奇数行。$ ('tr:even ')代表遍历选择页面上所有tr元素的偶数行。请注意，tr元素的索引从0开始，tr[0]是偶数行。

修改后的完整代码：

htmlstyle type='text/css '。奇数{背景色：黄色；}.甚至{ background-color : red；}/style script language=JAVAScript src=' http : js/jquery . min . js ' type=text/JAVAScript/script script $(文档)。ready(function() { $('tr:odd ')。addClass('奇数')；$('tr:even ')。addClass('偶数')；});/脚本正文表边框=' 1 ' tr tdno . 1/TD TD TD 0001/TD/tr trtdno . 2/TD TD/tr trtdno . 3/TD TD TD 0003/TD/tr trtdno . 4/TD TD TD 0004/TD/tr/table/body/html就这样