jQuery方法实现表格隔行显示效果(even偶数)(odd奇数)

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>jQuery实现表格隔行显示</title>
        <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
        <style type="text/css">
            #tbl_main {
                border: black thin solid;
            }
        </style>
    </head>

    <body>
        <table id="tbl_main" border="0" cellspacing="2" cellpadding="2">
            <tr>
                <th>序号</th>
                <th>订单号</th>
                <th>商品名称</th>
                <th>价格</th>
            </tr>
            <tr>
                <td>1</td>
                <td>1045900</td>
                <td>Niket透气减震运动鞋</td>
                <td>299</td>
            </tr>
            <tr>
                <td>2</td>
                <td>1045926</td>
                <td>天意美鱼嘴女单鞋</td>
                <td>189</td>
            </tr>
            <tr>
                <td>3</td>
                <td>1045933</td>
                <td>海贼王船模型</td>
                <td>19.5</td>
            </tr>
            <tr>
                <td>4</td>
                <td>1045300</td>
                <td>福尔摩斯探案大全集</td>
                <td>22.5</td>
            </tr>
        </table>
        <script type="text/javascript">
            $("tr:even").css("background-color", "#ccc");
        </script>
    </body>

</html>

//第一行实际为第0行

posted on 2018-01-04 12:06  空对月  阅读(670)  评论(0编辑  收藏  举报