jQuery--表格隔行变色

知识详解

jQuer调用方式

1.获取索引号为奇数的元素

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

2.取索引号为偶数的元素

$("tr:even").css("background-color", "颜色");

3.获取表格第一行

$("tr:eq(0)").css("background-color", "颜色"); 通过索引获取

("tr:first").css("background-color", "red"); 通过first获取

4.通过索引获取表格行

$("tr:eq(行号)").css("background-color", "green"); 表格行索引从0开始

例如：

$("tr:eq(1)").css("background-color", "green");

5.获取表格最后一行

$("tr:last").css("background-color", "pink");

6.通过选择器gt(行号)使该行号后面为自定义颜色

$("tr:gt(2)").css("background-color", "pink");

7.gt()获取的行号后隔行设置行颜色

$("tr:gt(1):even").css("background-color", "pink"); 隔行偶数为粉色

$("tr:gt(1):odd").css("background-color", "pink"); 隔行奇数为粉色

代码部分

jQuery实现表格隔行变色案例

html结构

<table id="tab1" border="1px" width="800" height="400" align="center"><tr><th></th><th></th><th></th><th></th></tr><tr><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td></tr></table>

jQuery代码部分(附带效果图如下)

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

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

$("tr:gt(2)").css("background-color", "pink");

$("tr:eq(1)").css("background-color", "green");