用javascript css实现GridView行背景色交替、鼠标划过行变色，点击行变色选中

下面是详细的JavaScript和CSS实现GridView行背景色交替、鼠标划过行变色，点击行变色选中的攻略。

1. 实现思路

GridView是一个常用的表格组件，为了提升用户体验，我们可以通过JavaScript和CSS来实现GridView行背景色交替、鼠标划过行变色以及点击行变色选中的功能。具体的实现思路如下：

使用CSS选择器：nth-child(even)和:nth-child(odd)来实现行背景色交替显示。
使用CSS伪类:hover来实现鼠标划过行变色。
使用JavaScript给表格的每一行添加点击事件，然后再通过CSS来实现选中行的变色。

2. 示例说明

下面是两个示例，第一个示例是针对纯前端的GridView实现，第二个示例是针对后端数据绑定的GridView实现。

示例一：纯前端实现

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>GridView示例</title>
    <style type="text/css">
        table {
            border-collapse: collapse;
            width: 80%;
            margin: 20px auto;
        }
        table th, table td {
            border: 1px solid #ccc;
            padding: 5px;
            text-align: center;
        }
        table tr:nth-child(even) {
            background-color:#f5f5f5;
        }
        table tr:nth-child(odd) {
            background-color:#fff;
        }
        table tr:hover {
            background-color:#e0e0e0;
        }
        table tr.selected {
            background-color:#ffcc99;
        }
    </style>
</head>
<body>
    <table>
        <tr>
            <th>姓名</th>
            <th>性别</th>
            <th>年龄</th>
            <th>专业</th>
        </tr>
        <tr>
            <td>张三</td>
            <td>男</td>
            <td>22</td>
            <td>计算机</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>女</td>
            <td>20</td>
            <td>设计</td>
        </tr>
        <tr>
            <td>王五</td>
            <td>男</td>
            <td>24</td>
            <td>英语</td>
        </tr>
        <tr>
            <td>赵六</td>
            <td>男</td>
            <td>23</td>
            <td>法律</td>
        </tr>
    </table>
    <script type="text/javascript">
        // 获取表格
        var table = document.querySelector('table');
        // 获取所有的行
        var rows = table.querySelectorAll('tr');
        // 遍历每一行，给每一行添加点击事件
        for (var i = 1; i < rows.length; i++) {
            rows[i].addEventListener('click', function() {
                // 先移除所有的选中行样式
                for (var j = 1; j < rows.length; j++) {
                    rows[j].classList.remove('selected');
                }
                // 为当前行添加选中行样式
                this.classList.add('selected');
            });
        }
    </script>
</body>
</html>

说明：以上示例的实现中，我们通过CSS选择器nth-child(even)和:nth-child(odd)来实现行背景色交替显示；使用CSS伪类:hover来实现鼠标划过行变色；通过JavaScript，给表格的每一行添加点击事件，当点击某一行时，先移除所有的选中行样式，再为当前行添加选中行样式，从而实现选中行的变色。

示例二：后端数据绑定实现

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>GridView示例</title>
    <style type="text/css">
        table {
            border-collapse: collapse;
            width: 80%;
            margin: 20px auto;
        }
        table th, table td {
            border: 1px solid #ccc;
            padding: 5px;
            text-align: center;
        }
        table tr:nth-child(even) {
            background-color:#f5f5f5;
        }
        table tr:nth-child(odd) {
            background-color:#fff;
        }
        table tr:hover {
            background-color:#e0e0e0;
        }
        table tr.selected {
            background-color:#ffcc99;
        }
    </style>
</head>
<body>
    <table>
        <tr>
            <th>姓名</th>
            <th>性别</th>
            <th>年龄</th>
            <th>专业</th>
        </tr>
        <% for (var i = 0; i < users.length; i++) {%>
            <tr>
                <td><%= users[i].name %></td>
                <td><%= users[i].gender %></td>
                <td><%= users[i].age %></td>
                <td><%= users[i].major %></td>
            </tr>
        <% } %>
    </table>
    <script type="text/javascript">
        // 获取表格
        var table = document.querySelector('table');
        // 获取所有的行
        var rows = table.querySelectorAll('tr');
        // 遍历每一行，给每一行添加点击事件
        for (var i = 1; i < rows.length; i++) {
            rows[i].addEventListener('click', function() {
                // 先移除所有的选中行样式
                for (var j = 1; j < rows.length; j++) {
                    rows[j].classList.remove('selected');
                }
                // 为当前行添加选中行样式
                this.classList.add('selected');
            });
        }
    </script>
</body>
</html>

说明：以上示例的实现中，我们依然使用CSS选择器nth-child(even)和:nth-child(odd)来实现行背景色交替显示；依然使用CSS伪类:hover来实现鼠标划过行变色。由于这是后端数据绑定的情况，所以我们需要在服务器端将数据绑定到GridView中。在遍历每一行时，依然需要给每一行添加点击事件，当点击某一行时，先移除所有的选中行样式，再为当前行添加选中行样式，从而实现选中行的变色。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：用javascript css实现GridView行背景色交替、鼠标划过行变色，点击行变色选中 - Python技术站