当前位置:首页 > 叨叨念念 > CSS3和jQuery分别实现表格多行交替变色

CSS3和jQuery分别实现表格多行交替变色

叨叨念念 / 星之宇 / 2021-12-6 19:53 / 浏览:1687 / 评论:0

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>

目前有 0 条评论

    • 昵称
    • 邮箱
    • 网址