使用JQ完成表格的隔行换色

最新推荐文章于 2024-09-30 16:36:43 发布

Gadxiong

最新推荐文章于 2024-09-30 16:36:43 发布

阅读量446

点赞数 1

本文链接：https://blog.youkuaiyun.com/Gadxiong/article/details/80514001

版权

本文展示了一个简单的HTML表格示例，并使用了jQuery为表格行添加了交替的颜色背景，以提高阅读体验。通过内联样式定义了表格的基本样式，包括边框宽度、字体大小等。

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格</title>
    <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
    <style type="text/css">
        *{
            margin: 1px auto;
            font-size: 18px;
        }
        table{
            border: 1px solid #136eb2;
        }
        table tr th,td{
            border: 1px solid #000000;
            width: 100px;
            text-align: left;
        }
    </style>
</head>
<body>
<table>
    <thead>
    <tr>
        <th>编号</th><th>姓名</th><th>年龄</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>1</td> <td>张三</td> <td>22</td>
    </tr>
    <tr>
        <td>2</td> <td>李四</td> <td>20</td>
    </tr>
    <tr>
        <td>3</td> <td>王五</td> <td>22</td>
    </tr>
    <tr>
        <td>4</td> <td>赵六</td> <td>20</td>
    </tr>
    <tr>
        <td>5</td> <td>孙七</td> <td>22</td>
    </tr>
    <tr>
        <td>6</td> <td>刘八</td> <td>20</td>
    </tr>
    </tbody>
</table>
</body>
<script type="text/javascript">
    $(function () {
        $("tbody tr:even").css("backgroundColor","#FFF38F");
        $("tbody tr:odd").css("backgroundColor","#FFFFEE");
    });
</script>
</html>