HTML表格交替颜色,用CSS3和jQuery实现表格每行交替颜色的效果。

方法一：CSS3 :nth-child() 选择器

1、通过双数行tr:nth-child(even)或者单数行tr:nth-child(odd)来表示即可。

331-1.png

代码如下： 

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>表格展示页 - 奇奇博讯</title>
    <style type="text/css">
        table {
            border: 1px solid #333;
            text-align: center;
        }
        
        th {
            background-color: #666;
            color: #FFF;
        }
        
        tr:nth-child(even) {
            background: #CCFFFF;
        }
    </style>
</head>

<body>
    <table width="450" class="color">
        <thead>
            <tr>
                <th>博客名称</th>
                <th>作者</th>
                <th>网址</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>奇奇博讯</td>
                <td>StarYu</td>
                <td>www.77bx.com</td>
            </tr>
            <tr>
                <td>奇奇博讯</td>
                <td>StarYu</td>
                <td>www.77bx.com</td>
            </tr>
            <tr>
                <td>奇奇博讯</td>
                <td>StarYu</td>
                <td>www.77bx.com</td>
            </tr>
            <tr>
                <td>奇奇博讯</td>
                <td>StarYu</td>
                <td>www.77bx.com</td>
            </tr>
        </tbody>
    </table>
</body>

</html>

方法二：jQuery框架

1、通过jQuery也可以实现这种效果。

331-2.png

代码如下： 

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>表格展示页 - 奇奇博讯</title>
    <style type="text/css">
        table {
            border: 1px solid #333;
            text-align: center;
        }
        
        th {
            background-color: #666;
            color: #FFF;
        }
        
        .color1 {
            background-color: #CCFFFF;
            color: #333;
        }
        
        .color2 {
            background-color: #666;
            color: #FFF;
        }
    </style>
    <script src="https://cdn.staticfile.org/jquery/3.7.0/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $("table tbody tr:odd").addClass("color1");
            $("table tbody tr")
                .mouseover(function() {
                    $(this).addClass("color2");
                })
                .mouseout(function() {
                    $(this).removeClass("color2");
                });
        });
    </script>
</head>

<body>
    <table width="450" class="color">
        <thead>
            <tr>
                <th>博客名称</th>
                <th>作者</th>
                <th>网址</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>奇奇博讯</td>
                <td>StarYu</td>
                <td>www.77bx.com</td>
            </tr>
            <tr>
                <td>奇奇博讯</td>
                <td>StarYu</td>
                <td>www.77bx.com</td>
            </tr>
            <tr>
                <td>奇奇博讯</td>
                <td>StarYu</td>
                <td>www.77bx.com</td>
            </tr>
            <tr>
                <td>奇奇博讯</td>
                <td>StarYu</td>
                <td>www.77bx.com</td>
            </tr>
        </tbody>
    </table>
</body>

</html>
声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。