html表格行颜色不同颜色,jquery怎么设置表格奇偶行不同的颜色？

在jQuery中使用“$("tr:odd").css("background-color","颜色")”与“$("#tr:even").css("background-color","颜色")”即可设置表格奇偶行颜色不同。

jquery实现表格奇偶行不同颜色的代码：

//用CSS控制奇偶行的颜色

$(document).ready(function(){

$("tr:odd").css("background-color", "#e6e6fa");

$("#tr:even").css("background-color", "#fff0fa");

}

:even 选择器选取每个带有偶数 index 值的元素(比如 2、4、6)。

:odd 选择器选取每个带有奇数 index 值的元素(比如 1、3、5)。

完整代码：

$(document).ready(function(){

$("tr:odd").css("background-color","#B2E0FF");

$("tr:even").css("background-color", "#fff0fa");

});

Welcome to My Web Page

Id	LastName	FirstName	Address	City
1	Adams	John	Oxford Street	London
2	Bush	George	Fifth Avenue	New York
3	Carter	Thomas	Changan Street	Beijing
4	Obama	Barack	Pennsylvania Avenue	Washington

效果如下：

前端开发学习请关注HTML中文网