<!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. power designer 水电费缴纳系统的设计

    alter table POWER drop constraint FK_POWER_REFERENCE_USERS; drop table POWER cascade constraints; /* ...

  2. 英语阅读积累<一>

    Passage 1.Woodpecker    惹treat or trick There are many apple trees in a garden.  They’re good friend ...

  3. 【斐波那契DP】HDU 4639——HeHe

    题目:点击打开链接 多校练习赛4的简单题,但是比赛的时候想到了推导公式f(n)=f(n-1)+f(n-2)(就是斐波那契数列),最后却没做出来. 首先手写一下he(不是hehe)连续时的规律.0-1 ...

  4. 将SCOM2007代理升级到 System Center 2012 SP1

    使用以下过程可以升级到 System Center 2012 Service Pack 1 (SP1), Operations Manager工程师.您应首先验证代理程序满足最小受支持的配置.有关详细 ...

  5. httpclient模拟浏览器訪问站点

    HttpClient 是 Apache Jakarta Common 下的子项目.能够用来提供高效的.最新的.功能丰富的支持 HTTP 协议的client编程工具包.而且它支持 HTTP 协议最新的版 ...

  6. 百度之星资格赛，hdu 4825 XOR SUM

    显然是要建一棵0.1树 事实上非常easy就是二叉树,仅仅只是为了操作简便,即程序的速度,所以就採用静态树,即不动态分配内存,使用较大的全局数组.0是根节点 #include<cstdio> ...

  7. C/C++开发工具大比拼【转】

    C/C++开发工具大比拼[转]  (http://hi.baidu.com/vipdowndown/blog/item/dcd7c1b5ad3209ef30add167.html) * NetBean ...

  8. [C++]对象的销毁机制

    销毁时会按照从后向前的顺序销毁,也就是说,越在后面定义的对象会越早销毁.其中的原因就是函数是在栈中保存的,因此,先定义的对象先压栈,所以在退栈时就会后销毁.而如果参数有多个的话,大多数编译器是从右开始 ...

  9. Android中Touch事件分析--解决HorizontalScrollView滑动和按钮事件触发问题

    之前写过关于HorizontalScrollView滑动和按钮事件触发问题,但是不能所有的情况,最近几天一直在想这个问题,今天有一个比较好的解决思路,最终应用在项目里面效果也很好,首先说明一下功能: ...

  10. 使用TortoiseGit对Git版本进行分支操作

    版本克隆分支问题 TortoiseGit在克隆分支的时候,默认克隆master分支,克隆后本地工作目录为中心器的Master分支. 克隆后本地分支 中心库分支 Push分支到中心服务器(Pushing ...