jquery实现隔行变色

最新推荐文章于 2022-04-27 19:40:20 发布

原创最新推荐文章于 2022-04-27 19:40:20 发布 · 399 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #隔行变色

jquery 专栏收录该内容

7 篇文章

订阅专栏

jquery实现隔行变色

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <style type="text/css">
        *{
            margin: 0px auto;
            padding: 0px;
        }
        table,tr,td{
            border: 1px solid;
            border-collapse: collapse; 
        }

        td{
            width: 200px;
            height: 40px;
        }
    </style>
    <script type="text/javascript" src="jquery-3.1.1.min.js">   
    </script>
    <script type="text/javascript">
        $(document).ready(function(){
            $("tr:even").css("background","red");
            $("tr:odd").css("background","yellow");


        })
    </script>
</head>
<body>
    <table>
        <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>
</body>
</html>