【免费】jquery表格排序资源-CSDN下载

共9个文件

js：4个

gif：3个

html：1个

需积分: 0 94 浏览量 2009-01-04 12:14:45 上传评论收藏 43KB RAR 举报

**jQuery表格排序** jQuery是一个广泛使用的JavaScript库，它简化了HTML文档遍历、事件处理、动画和Ajax交互。在jQuery中实现表格排序是一项常见的任务，特别是在动态数据展示和用户交互丰富的网页应用中。本示例将介绍如何使用jQuery实现一个简单的表格排序功能。我们需要一个包含数据的HTML表格。在`td.html`文件中，我们可能会看到类似以下的结构： ```html <table id="myTable"> <thead> <tr> <th onclick="sortTable(0)">姓名</th> <th onclick="sortTable(1)">年龄</th> <th onclick="sortTable(2)">城市</th> </tr> </thead> <tbody> <tr><td>张三</td><td>30</td><td>北京</td></tr> <tr><td>李四</td><td>25</td><td>上海</td></tr>  </tbody> </table> ``` 在上述代码中，我们为表头的每一列添加了一个点击事件，调用名为`sortTable`的JavaScript函数，该函数接收一个参数，表示要排序的列索引。接下来，我们需要在`jslib`文件夹中的JavaScript文件中定义`sortTable`函数。这个函数会根据传入的列索引对表格进行升序或降序排序： ```javascript function sortTable(columnIndex) { var table, rows, switching, i, x, y, shouldSwitch; table = document.getElementById("myTable"); switching = true; while (switching) { switching = false; rows = table.rows; for (i = 1; i < (rows.length - 1); i++) { shouldSwitch = false; x = rows[i].getElementsByTagName("TD")[columnIndex]; y = rows[i + 1].getElementsByTagName("TD")[columnIndex]; if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) { shouldSwitch = true; break; } } if (shouldSwitch) { rows[i].parentNode.insertBefore(rows[i + 1], rows[i]); switching = true; } } // 添加升序/降序切换逻辑 var currentOrder = 'asc'; var headers = table.getElementsByTagName('th'); headers[columnIndex].classList.remove(currentOrder); currentOrder = currentOrder === 'asc' ? 'desc' : 'asc'; headers[columnIndex].classList.add(currentOrder); } ``` 在`sortTable`函数中，我们首先获取到表格的DOM对象，然后使用一个while循环进行多次比较。每次比较相邻两行的指定列数据，并根据结果决定是否交换这两行。我们根据当前的排序方向更新表头的样式，以便用户知道当前的排序状态。为了使表格排序更具交互性，我们可以添加一些视觉提示，例如在用户点击表头时显示升序或降序的箭头。这可以通过CSS类来实现，如`asc`（升序）和`desc`（降序），并在JavaScript中切换这些类。此外，`img`文件夹可能包含了一些图标资源，用于在排序箭头的CSS样式中引用，以增强用户体验。总结来说，这个jQuery表格排序的例子展示了如何使用纯JavaScript（而非依赖特定插件）实现一个基本的表格排序功能。通过点击表头，可以对表格数据进行升序或降序排列。同时，通过添加CSS样式和JavaScript逻辑，可以实现排序状态的视觉反馈，提高用户交互体验。

资源推荐

资源详情

资源评论

收起资源包目录

AjaxDOM.rar （9个子文件）

img

1.gif 385B

small.gif 60B

loading.gif 734B

Thumbs.db 6KB

td.html 3KB

jslib

td.js 1KB

jquery.tablesorter.js 23KB

jquery.tablesorter.min.js 12KB

jquery.js 98KB

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title></title> <script type="text/javascript" src="jslib/jquery.js"></script> <script type="text/javascript" src="jslib/jquery.tablesorter.js"></script> <script type="text/javascript" src="jslib/td.js"></script> <style type="text/css"> th.header { background-image: url(img/small.gif ); cursor: pointer; font-weight: bold; background-repeat: no-repeat; background-position: center left; padding-left: 20px; border-right: 1px solid #dad9c7; margin-left: -1px; } </style> </head> <body> <table id="mytable" cellpadding="0" cellspacing="0" align="center" width="50%"> <thead> <tr> <th>国家</th> <th>地区</th> </tr> </thead> <tr> <td>中国</td> <td>北京</td> </tr> <tr> <td>美国</td> <td>芝加哥</td> </tr> <tr> <td>英国</td> <td>伦敦</td> </tr> <tr> <td>日本</td> <td>广岛</td> </tr> </table> <br/> <table width="50%" id="tab" align="center" style="border-collapse:collapse;" class=tablesorter cellspacing=0 cellpadding="0"> <thead> <tr> <th>first name</th> <th>last name</th> <th>age</th> <th>total</th> <th>discount</th> <th>date</th> </tr> </thead> <tbody> <tr> <td>向</td> <td>parker</td> <td>28</td> <td>$9.99</td> <td>20%</td> <td>jul 6, 2006 8:14 am</td> </tr> <tr> <td>john</td> <td>hood</td> <td>33</td> <td>$19.99</td> <td>25%</td> <td>dec 10, 2002 5:14 am</td> </tr> <tr> <td>clark</td> <td>kent</td> <td>18</td> <td>$15.89</td> <td>44%</td> <td>jan 12, 2003 11:14 am</td> </tr> <tr> <td>bruce</td> <td>almighty</td> <td>45</td> <td>$153.19</td> <td>44%</td> <td>jan 18, 2001 9:12 am</td> </tr> <tr> <td>bruce</td> <td>evans</td> <td>22</td> <td>$13.19</td> <td>11%</td> <td>jan 18, 2007 9:12 am</td> </tr> </tbody> </table> <br> <div id="move"> 移动 </div> <div style="border:#F1F1F1 2px solid ; width:200px; heigth:200px;" id="contentUrl">   </div> <input type="button" value="移动" id="but"> <input type="button" value="加载" id="load"> </body> </html>

评论收藏

内容反馈