模块：jquery实现表格的隔行换色

效果图：

知识点精讲：jquery中$("tr:odd")和$("tr:even")选择器分别代表奇数行和偶数行，并且索引是从0开始，即第一行为偶数；

代码实现过程：

样式写法：

<style type="text/css">

        .even{background-color:#F0C040;}//定义奇数行背景色

        .odd{background-color:#93BEE2;}//定义偶数行背景色

    </style>

html代码：在表格中，除了表格内容外，不需要添加任何内容

<table border="1" cellspacing="0" cellpadding="0">

            <tr><th>Header</th><td>1111</td><td>2222</td></tr>

            <tr><th>Header</th><td>Data</td><td>33333</td></tr>

            <tr><th>Header</th><td>Data</td><td>33333</td></tr>

            <tr><th>Header</th><td>Data</td><td>33333</td></tr>

        </table>

jquery代码实现：

<script type="text/javascript">

$(document).ready(function(){

$("tr:odd").addClass("odd");  //通过tr:odd给奇数行添加odd样式

$("tr:even").addClass("even");//通过tr:even给偶数行添加even样式

});

巴特西

模块：jquery实现表格的隔行换色

最新文章

热门文章