html表格table的表头排序,js代码fastunit使用案例
2015-02-16 13:28
603 查看
页面效果:
下面是这个页面的HTML源码,实例的下载地址是:http://download.csdn.net/download/asiaasia666/8449215
下面是这个页面的HTML源码,实例的下载地址是:http://download.csdn.net/download/asiaasia666/8449215
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <link rel="stylesheet" type="text/css" href="css/style.css" /> <script type="text/javascript" src="js/tablesort/mootools.js"></script> <!---本排序功能并不依赖于jquery--> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/tablesort/fastunit.js"></script> <SCRIPT LANGUAGE="JavaScript"> //如果使用了jQuery,jQuery必须让出$定义。并且Jquery必须为最后引入(比mootools.js靠后) jQuery.noConflict(); </SCRIPT> </head> <body> <table id="testTableId" onmousedown="$fRC(event)" onmouseover="$fRO(event)" onmouseout="$fRX(event)" class="GB" cellspacing="0" style="width: 80%;"> <%--tr的id等于"x"的不参与排序, 其余有id的tr参与排序--%> <%--全选,这里和下面的checkbook是有约定的,全选id="_sa_" 每行的选择框的id= "_s_" + testTableId --%> <tr id="x" class="LHB"> <td> <input type="checkbox" id="_sa_" onclick="$fSelectAll('testTableId',this)"> </td> <td onclick="$fSort(this,'testTableId.proj_type',2)" style="cursor: hand" width="60px"> 姓名 <img src="images/tablesort/s0.png"> </td> <td onclick="$fSort(this,'testTableId.age',2)" style="cursor: hand" width="60px"> 年龄<img src="images/tablesort/s0.png"> </td> <td onclick="$fSort(this,'testTableId.born_date',4)" style="cursor: hand" width="100px"> 出生日期<img src="images/tablesort/s0.png"> </td> <td onclick="$fSort(this,'testTableId.money',2)" style="cursor: hand" width="100px"> 资产<img src="images/tablesort/s0.png"> </td> <td> 个人网站 </td> </tr> <tr id="a" class="R1"> <td style="text-align: center; width: 20px;"> <input name="_s_testTableId" type="checkbox" onclick="$fResetCheck('testTableId')"> </td> <td style="width: 60px;"> 小明 </td> <td style="width: 60px;"> 28 </td> <td style="width: 100px;"> 1986-01-01 </td> <td> 1000000.1 </td> <td> <a href="http://www.baidu.com">gg</a> </td> </tr> <tr id="b" class="R2"> <td style="text-align: center; width: 20px;"> <input name="_s_testTableId" type="checkbox" onclick="$fResetCheck('testTableId')"> </td> <td style="width: 60px;"> 李蕾 </td> <td style="width: 60px;"> 50 </td> <td style="width: 100px;"> 1950-01-01 </td> <td> 10000000 </td> <td> <a href="http://www.baidu.com">ff</a> </td> </tr> <tr id="1" class="R2"> <td style="text-align: center; width: 20px;"> <input name="_s_testTableId" type="checkbox" onclick="$fResetCheck('testTableId')"> </td> <td style="width: 60px;"> 李蕾 </td> <td style="width: 60px;"> 26 </td> <td style="width: 100px;"> 2013-05-09 </td> <td> 100.00 </td> <td> <a href="http://www.baidu.com">lilei</a> </td> </tr> <tr id="2" class="R2"> <td style="text-align: center; width: 20px;"> <input name="_s_testTableId" type="checkbox" onclick="$fResetCheck('testTableId')"> </td> <td style="width: 60px;"> 小马 </td> <td style="width: 60px;"> 28 </td> <td style="width: 100px;"> 1986-01-01 </td> <td> 100.00 </td> <td> <a href="http://www.baidu.com">lilei</a> </td> </tr> <tr id="3" class="R2"> <td style="text-align: center; width: 20px;"> <input name="_s_testTableId" type="checkbox" onclick="$fResetCheck('testTableId')"> </td> <td style="width: 60px;"> 小明 </td> <td style="width: 60px;"> 28 </td> <td style="width: 100px;"> 1984-01-01 </td> <td> 100.00 </td> <td> <a href="http://www.baidu.com">lilei</a> </td> </tr> </table> </body> </html>
相关文章推荐
- 网页表格表头固定并可以自由拉伸列头的问题解决 (完美方案_html_table_seo)
- HTML表格标签的使用-<table>
- HTML table表头排序箭头绘制法【不用箭头图片】
- <学习html>第五天笔记-表格table(创建表格、表格属性、表头标签、表格结构、表格标题标签、合并单元格)
- 纯css实现table表格固定列和表头,中间横向滚动的思路-附案例
- HTML、CSS和JavaScript学习五(案例分析三表格排序及颜色变换)
- 使用jQuery操作HTML的table表格的实例解析
- [置顶] ajax请求得到后台数据,前台页面,使用table模板然后clone,显示表格,,不用append拼接 “字符串和HTML表格标签”
- Table tr td th表格使用案例
- 如何使用html表格自定义或采用tableexport.js第三方插件以excel格式导出
- 使用jQuery实现table表格排序js插件
- HTML表格标签的使用-<table>
- web中table表格点击表头排序
- 基于Metronic的Bootstrap开发框架经验总结(16)-- 使用插件bootstrap-table实现表格记录的查询、分页、排序等处理
- jquery.tableSort.js表格排序插件使用方法详解
- html table表头排序功能
- 使用listview绘制表格,实现双击表头排序
- 使用jQuery操作HTML的table表格的实例解析
- 纯css实现table表格固定列和表头,中间横向滚动的思路-附案例
- table 元素使用案例(设置工单表格)