jQuery实现Table表格隔行变色及高亮显示当前选择行效果示例

当我们需要在网页上展示一些数据时，常用的方式之一就是使用HTML中的table标签，但是如果表格中的数据较多，为了阅读方便往往需要隔行变色以及高亮显示当前选择的行。jQuery提供了很好的解决方案，下面我将详细讲解如何实现这些效果。

1. 隔行变色

要实现隔行变色的效果，我们可以使用jQuery的选择器来筛选需要被改变颜色的行，然后使用jQuery提供的css()方法改变这些行的背景颜色。具体实现如下：

<!DOCTYPE html>
<html>
<head>
    <title>隔行变色示例</title>
    <style type="text/css">
        tr {
            height: 50px;
            line-height: 50px;
            text-align: center;
        }
        .odd {
            background-color: #FFE4E1;
         }
        .even {
            background-color: #F5FFFA;
        }
    </style>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script type="text/javascript">
        $(function() {
            var oddColor = "#FFE4E1";   // 定义奇数行的背景颜色
            var evenColor = "#F5FFFA";  // 定义偶数行的背景颜色
            $("tr:odd").addClass("odd");   // 筛选为奇数行添加class
            $("tr:even").addClass("even"); // 筛选为偶数行添加class
        });
    </script>
</head>
<body>
    <table>
        <thead>
            <tr>
                <th>姓名</th>
                <th>性别</th>
                <th>年龄</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>张三</td>
                <td>男</td>
                <td>26</td>
            </tr>
            <tr>
                <td>李四</td>
                <td>女</td>
                <td>32</td>
            </tr>
            <tr>
                <td>王五</td>
                <td>男</td>
                <td>19</td>
            </tr>
            <tr>
                <td>赵六</td>
                <td>女</td>
                <td>27</td>
            </tr>
            <tr>
                <td>钱七</td>
                <td>男</td>
                <td>24</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

在上面的示例代码中，我们定义了奇数行和偶数行的背景颜色，然后使用jQuery的选择器筛选出所有奇数行和偶数行分别添加对应的class，最后使用CSS来设置不同class对应的背景颜色。

2. 高亮显示当前选择行

在表格中，我们经常需要高亮显示当前选择的行，比如在鼠标移动到某一行上或点击某一行时需要高亮显示该行。使用jQuery实现这个效果也是非常简单的，具体实现如下：

<!DOCTYPE html>
<html>
<head>
    <title>高亮显示当前选择行示例</title>
    <style type="text/css">
        tr {
            height: 50px;
            line-height: 50px;
            text-align: center;
        }
        .active {
            background-color: #00FF7F;
        }
    </style>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script type="text/javascript">
        $(function() {
            $("tr").on({
                mouseover: function() {
                    $(this).addClass("active");
                },
                mouseout: function() {
                    $(this).removeClass("active");
                }
            });
        });
    </script>
</head>
<body>
    <table>
        <thead>
            <tr>
                <th>姓名</th>
                <th>性别</th>
                <th>年龄</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>张三</td>
                <td>男</td>
                <td>26</td>
            </tr>
            <tr>
                <td>李四</td>
                <td>女</td>
                <td>32</td>
            </tr>
            <tr>
                <td>王五</td>
                <td>男</td>
                <td>19</td>
            </tr>
            <tr>
                <td>赵六</td>
                <td>女</td>
                <td>27</td>
            </tr>
            <tr>
                <td>钱七</td>
                <td>男</td>
                <td>24</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

在上面的示例代码中，我们使用jQuery的on()方法来绑定鼠标悬停和离开事件，当鼠标悬停在某一行上时，使用jQuery的addClass()方法添加active类，当鼠标离开时，使用removeClass()方法移除active类。在CSS中定义active类的背景颜色即可实现高亮显示当前选择行的效果。

通过以上示例，我们可以看出，使用jQuery实现表格的隔行变色和高亮显示当前选择行效果非常简单，只需要使用jQuery的选择器和方法来操作DOM元素即可。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：jQuery实现Table表格隔行变色及高亮显示当前选择行效果示例 - Python技术站