<!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title></title>

     </head>

     <body>

         <input id="btn1" type="button" value="排序">

         <table id="tab1" width="200" border="1" cellpadding="14">

             <thead>

                 <td>序号</td>

                 <td>姓名</td>

                 <td>年龄</td>

             </thead>

             <tbody>

                 <tr>

                     <td>2</td>

                     <td>张三</td>

                     <td>20</td>

                 </tr>

                 <tr>

                     <td>4</td>

                     <td>李四</td>

                     <td>25</td>

                 </tr>

                 <tr>

                     <td>3</td>

                     <td>赵龙</td>

                     <td>30</td>

                 </tr>

                 <tr>

                     <td>1</td>

                     <td>孙河</td>

                     <td>21</td>

                 </tr>

             </tbody>

         </table>

         <script type="text/javascript">

             var oTab=document.getElementById('tab1');

             var oBtn=document.getElementById('btn1');

             oBtn.onclick=function(){

                 var arr=[]

                 for(i=0;i<oTab.tBodies[0].rows.length;i++){

                     arr[i]=oTab.tBodies[0].rows[i];

                 }

                 arr.sort(function(tr1,tr2){

                 var n1=parseInt(tr1.cells[0].innerHTML);

                 var n2=parseInt(tr2.cells[0].innerHTML);

                 return n1-n2;

                 })

                 for(i=0;i<arr.length;i++){

                     oTab.tBodies[0].appendChild(arr[i])

                 }

             }

         </script>

     </body>

 </html>

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

JS学习之表格的排序的更多相关文章

  1. 【JS】依据表格ID进行排序（附凝视）

    分享一个前端做的依据表格ID进行排序的方法哈,贴码例如以下: HTML: <input type="button" id="btn1" value=&qu ...

  2. JS实现点击表头表格自动排序（含数字、字符串、日期）

    这篇文章主要介绍了利用JS如何实现点击表头后表格自动排序,其中包含数字排序.字符串排序以及日期格式的排序,文中给出了完整的示例代码,并做了注释,相信大家都能看懂,感兴趣的朋友们一起来看看吧. < ...

  3. js 实现table表格拖拽和点击表头升降序排序

    js 实现table表格拖拽和点击表头升降序排序,写的比较乱,用的时候可以把其中的一些模块函数提取出来 样式,由于是可拖拽表格,所以样式 table tr th{cursor:move;} js实现 ...

  4. JS实现前台表格排序功能

    JS实现前台表格排序功能 虽然数据量不大的情况下,前台排序速度比较快,但一般情况下,我们的项目只使用后台排序,原因有二: 一是代码简单:二是前台JS排序对于有分页的情况无法处理. 前段时间,有个功能需 ...

  5. js学习篇1--数组

    javascript的数组可以包含各种类型的数据. 1. 数组的长度 ,直接用 length 属性; var arr=[1,2,3]; arr.length; js中,直接给数组的length赋值是会 ...

  6. JS组件系列——表格组件神器：bootstrap table

    前言:之前一直在忙着各种什么效果,殊不知最基础的Bootstrap Table用法都没有涉及,罪过,罪过.今天补起来吧.上午博主由零开始自己从头到尾使用了一遍Bootstrap Table ,遇到不少 ...

  7. JS组件系列——表格组件神器：bootstrap table（三：终结篇，最后的干货福利）

    前言:前面介绍了两篇关于bootstrap table的基础用法,这章我们继续来看看它比较常用的一些功能,来个终结篇吧,毛爷爷告诉我们做事要有始有终~~bootstrap table这东西要想所有功能 ...

  8. jquery.tablesorter.js 学习笔记

    jquery.tablesorter.js 一般情况下,表格数据的排序方式有两种,第一种是让后端服务将排序后的数据直接输出,另外一种方式就是使用客户端排序,而jquery.tablesorter.js ...

  9. 2019-4-29 js学习笔记

    js学习笔记一:js数据类型   1:基本数据类型       number类型(整数,小数)      String类型          boolean类型        NaN类型其实是一个nu ...

随机推荐

  1. hibernate分页实现

    1.创建分页实体类 public class PageBean { private int page; // 页码 private int rows; // 每页显示行数 private int st ...

  2. 【Stage3D学习笔记续】山寨Starling（二）：VertexData探幽

    还记得之前的学习笔记中我们的顶点缓冲数组中的顶点数据么,我们使用一个一维数组来记录所有的顶点数据,这是由于顶点缓冲上传数据时是使用的一维数组. 如果对顶点数据进行一层代码的封装,就能更加的方便我们来操 ...

  3. Sql Server 带参数的存储过程执行方法

    Sql Server 带参数的存储过程执行方法 Visual C# 动态操作 SQL Server 数据库实例教程(4):带参数的存储过程执行方法 上一篇文章介绍了带参数的SQL语句执行方法和不带参数 ...

  4. Linux使用netstat命令查看并发连接数[转]

    转自:http://www.cnblogs.com/wayne173/p/5652043.html Linux使用netstat命令查看并发连接数   我们的网站部署在linux的服务器上,特别是we ...

  5. HDU4279(2012年天津网络赛---数论分析题)

    题目:Number 题意: 给出一个f(x),表示不大于x的正整数里,不整除x且跟x有大于1的公约数的数的个数.定义F(x),为不大于x的正整数里,满足f(x)的值为奇数的数的个数.题目就是求这个F( ...

  6. Winfrom treeview 如何从多个数据表中获取数据动态生成

    本文转载:http://www.cnblogs.com/VincentLuo/archive/2008/03/29/1128987.html 在 汪洋怡舟的这篇文章中[http://www.cnblo ...

  7. DataGridView单元格显示GIF图片

    本文转载:http://home.cnblogs.com/group/topic/40730.html DataGridView单元格显示GIF图片 gifanimationindatagrid.ra ...

  8. JS 添加千分位，测试可以使用

    JS 添加千分位,测试可以使用 <script language="javascript" type="text/javascript">funct ...

  9. Fatal error: Allowed memory size of 134217728 bytes exhausted (tried to allocate 44 bytes) in

    最近莫名出现这个错误. 研究一下原因很奇葩呢. 原因:sql获取数据库中数据,取出数据赋给变量,数据太多,超过memory_limit内存设置了. 解决方法:设置memory_limit不建议.优化代 ...

  10. Hive权限介绍

    一.开启权限 眼下hive支持简单的权限管理,默认情况下是不开启.这样全部的用户都具有同样的权限.同一时候也是超级管理员.也就对hive中的全部表都有查看和修改的权利,这样是不符合一般数据仓库的安全原 ...