JS学习之表格的排序

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title></title>
 6     </head>
 7     <body>
 8         <input id="btn1" type="button" value="排序">
 9         <table id="tab1" width="200" border="1" cellpadding="14">
10             <thead>
11                 <td>序号</td>
12                 <td>姓名</td>
13                 <td>年龄</td>
14             </thead>
15             <tbody>
16                 <tr>
17                     <td>2</td>
18                     <td>张三</td>
19                     <td>20</td>
20                 </tr>
21                 <tr>
22                     <td>4</td>
23                     <td>李四</td>
24                     <td>25</td>
25                 </tr>
26                 <tr>
27                     <td>3</td>
28                     <td>赵龙</td>
29                     <td>30</td>
30                 </tr>
31                 <tr>
32                     <td>1</td>
33                     <td>孙河</td>
34                     <td>21</td>
35                 </tr>
36             </tbody>
37         </table>
38         <script type="text/javascript">
39             var oTab=document.getElementById('tab1');
40             var oBtn=document.getElementById('btn1');
41             oBtn.onclick=function(){
42                 var arr=[]
43                 for(i=0;i<oTab.tBodies[0].rows.length;i++){
44                     arr[i]=oTab.tBodies[0].rows[i];
45                 }
46                 arr.sort(function(tr1,tr2){
47                 var n1=parseInt(tr1.cells[0].innerHTML);
48                 var n2=parseInt(tr2.cells[0].innerHTML);
49                 return n1-n2;
50                 })
51                 for(i=0;i<arr.length;i++){
52                     oTab.tBodies[0].appendChild(arr[i])
53                 }
54             }
55         </script>
56     </body>
57 </html>

这里的sort很方便，但是有一个小问题，如：ali=document.getelementbyid(li) 这里的ali严格意义上并不是一个标准的Array，所以sort并不能直接对ali使用。我们用一个arr来实现一个巧妙的转换。这样只要点击排序按钮，表格就会按照从大到小的顺序排列啦

转载于:https://www.cnblogs.com/zhouliang/p/5497527.html

JS学习之表格的排序相关推荐

html怎么自动导入数据并排序,JS实现table表格数据排序功能(可支持动态数据+分页效果)...
asp.net会经常遇到分页的效果,尤其是希望实现静态的html分页排序(html分页相信大家都已经有自己的解决方案.在这里就不多说).我写了一个简单的Demo排序. 数据就是字母和数字两组.(汉字需 ...
angular ts 表格_Angular2表格/可排序/table
Angular2表格 1. 官网下载Angular2开发环境,以及给出的quickstart代码示例demo(地址如下),具体步骤不在详述. https://github.com/angular/qu ...
【Vue.JS】Vue.JS 表格内容排序组件，Render函数的使用
声明:文中代码整体思路来源于梁灏编著的 [Vue.JS 实战]一书,学习过程中因觉得该组件效果不错,比较实用,所以记录一份并做了详细的注释以供学习效果图代码 index.html <!D ...
JS实现点击表头表格自动排序（含数字、字符串、日期）
<!DOCTYPE> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta h ...
html表格按照编号排序,JS实现简单表格排序操作示例
本文实例讲述了JS实现简单表格排序操作.分享给大家供大家参考,具体如下: sort table *{ margin:0px; padding:0px; } body{ background:#ccc; ...
python给excel排序_Python实现EXCEL表格的排序功能示例
Python实现EXCEL表格的排序功能示例 EXCEL的数值排序功能还是挺强大的,升序.降序,尤其自定义排序,能够对多个字段进行排序工作. 那么,在Python大法中,有没有这样强大的排序功能呢?答 ...
js建立excel表格_建立Excel足球联赛表格传统方法与动态数组
js建立excel表格介绍 (Introduction) I am going to show you the different ways you can build a football lea ...
商情云 | php学习 | wampserver | 宝塔面板 | fastadmin框架 | JS学习
宝塔面板相关配置文件位置 D:\hc\baota 处理函数被禁用问题问题:wampserver图标变橙了解决:wampserver三个服务分别是Apache.PHP.MySQL,变红说明三个服务 ...
JS组件系列——表格组件神器：bootstrap table
前言:之前一直在忙着各种什么效果,殊不知最基础的Bootstrap Table用法都没有涉及,罪过,罪过.今天补起来吧.上午博主由零开始自己从头到尾使用了一遍Bootstrap Table ,遇到不少 ...
使html表格可编辑状态,js+Html实现表格可编辑操作
本文实例为大家分享了js+Html实现表格可编辑操作的具体代码,供大家参考,具体内容如下功能描述:单击页面使单元格td变成可编辑状态,输入内容后,当单元格失去焦点时,保存输入的内容. 点击增加行,在 ...

JS学习之表格的排序

JS学习之表格的排序相关推荐

最新文章

热门文章