html如何为表格添加排序功能?

89次阅读
没有评论

HTML本身并不支持表格排序功能,但可以通过JavaScript和相关插件来实现。

一种比较简单的实现方式是使用jQuery插件,如Tablesorter。下面是一个简单的示例代码:

首先,需要引入jQuery和Tablesorter的库文件:

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.31.3/js/jquery.tablesorter.min.js"></script>

然后在表格的<thead>标签中添加排序的标识:

<table id="myTable">
    <thead>
    <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>成绩</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>张三</td>
        <td>25</td>
        <td>80</td>
    </tr>
    <tr>
        <td>李四</td>
        <td>30</td>
        <td>90</td>
    </tr>
    <tr>
        <td>王五</td>
        <td>28</td>
        <td>70</td>
    </tr>
    </tbody>
</table>

最后在JavaScript中使用Tablesorter插件来启用表格排序功能:

<script>
    $(document).ready(function() {
        $("#myTable").tablesorter();
    });
</script>

通过以上代码,即可在表格中实现简单的排序功能。当然,Tablesorter插件还支持更多的功能和自定义选项,可根据具体需要进行配置和使用。

完整示例:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Table Hover Effect</title>
    <style>
        table {
            border-collapse: collapse;
            width: 100%;
        }

        th, td {
            text-align: left;
            padding: 8px;
            border-bottom: 1px solid #ddd;
        }

        tr:hover {
            background-color: #f5f5f5;
        }
    </style>
</head>
<body>
<h1>Table Hover Effect</h1>
<table id="myTable">
    <thead>
    <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>成绩</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>张三</td>
        <td>25</td>
        <td>80</td>
    </tr>
    <tr>
        <td>李四</td>
        <td>30</td>
        <td>90</td>
    </tr>
    <tr>
        <td>王五</td>
        <td>28</td>
        <td>70</td>
    </tr>
    </tbody>
</table>

</body>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.31.3/js/jquery.tablesorter.min.js"></script>
<script>
    $(document).ready(function() {
        $("#myTable").tablesorter();
    });
</script>
</html>

 

正文完
 
评论(没有评论)