用jp进行隔行换色

高旭t-t

于 2018-08-27 01:17:30 发布

阅读量134

点赞数

本文链接：https://blog.youkuaiyun.com/qq_42746098/article/details/82086451

版权

该博客展示了使用jQuery实现表格隔行换色的代码。通过引入jQuery库，利用`even`和`odd`选择器分别为表格偶数行和奇数行设置不同背景颜色，实现隔行换色效果，属于前端开发技术。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>呼呼</title>
    <script type="text/javascript" src="jquery-1.8.3.min.js"></script>
    <script>
        $(function () {
            $("tbody>tr:even").css("background-color","red");   //  这里就是隔行换色的地方  间隔一个tr换一种颜色
            $("tbody>tr:odd").css("background-color","yellow");    //   even和odd实现
        })
    </script>
</head>
<body>
<table width="400" height="200" border="7" align="center">
    <tr>
        <td>编号</td>
        <td>姓名</td>
        <td>年龄</td>
    </tr>
    <tr>
        <td>1</td>
        <td>张三</td>
        <td>22</td>
    </tr>
    <tr>
        <td>2</td>
        <td>李四</td>
        <td>25</td>
    </tr>
    <tr>
        <td>3</td>
        <td>王五</td>
        <td>27</td>
    </tr>
    <tr>
        <td>4</td>
        <td>赵六</td>
        <td>29</td>
    </tr>
    <tr>
        <td>5</td>
        <td>田七</td>
        <td>30</td>
    </tr>
    <tr>
        <td>6</td>
        <td>汾九</td>
        <td>20</td>
    </tr>
</table>

</body>
</html>