在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中文网