cari

Rumah >hujung hadapan web >tutorial js >jquery插件tablesorter如何实现html表格用法实例详解

jquery插件tablesorter如何实现html表格用法实例详解

伊谢尔伦
伊谢尔伦asal
2017-07-22 09:56:502668semak imbas

tablesort是一款很好用的jQuery表格排序插件。 支持多种数据类型排序，会自动识别表格内容数据类型，使用也非常方便。

使用jQuery tablesort实现html表格方法:

1. 下载jQuery和tablesort脚本，并在html中引用该脚本文件：


<script type="text/javascript" src="../jquery-latest.js"></script>
<script type="text/javascript" src="../jquery.tablesorter.js"></script>

2. 格式化需要排序的html表格：

a. 给需要排序的表格指定CCS类：class="sort-table"
b. 使用thead和tbody标签来标记表格头和表格正文
c. 在表格头thead中需要使用th标签定义表头
格式化好的html表格如下所示：


<table border=1 width="800px" class="sort-table">
<thead>
 <tr>
 <th>Date</th>
 <th>Usage</th>
 <th>Cost</th>
 <th>Remain</th>
 </tr>
</thead>
<tbody>
 <tr>
 <td>2008-3-25</td>
 <td>book place @dhgu</td>
 <td>-40</td>
 <td>-40</td>
 </tr>
 <tr>
 <td>2008-4-1</td>
 <td>book place @dhgu</td>
 <td>-40</td>
 <td>-80</td>
 </tr>
</tbody>
</table>

3. 添加jQuery代码，启用html表格排序：
在body中对在第二步中指定的排序表格css类调用tablesorter()函数：


<body>
<script type="text/javascript">
 $(document).ready(function() {
 $(".sort-table").tablesorter(); 
 });
</script>

通过上面的3步，jQuery tablesort就可以实现对html表格的排序。

Atas ialah kandungan terperinci jquery插件tablesorter如何实现html表格用法实例详解. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：JavaScript与html5如何实现canvas绘制圆形图案的方法介绍Artikel seterusnya：javascript获取表单数据的原始做法和升级做法实例详解

Artikel berkaitan

Lihat lagi