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");