<!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. php中带mb的字符串处理函数

    int strlen ( string $string ) int mb_strlen ( string $str [, string $encoding ] ) encoding参数为字符编码.如果 ...

  2. svn 如何解决冲突

    项目中,往往不止你一人开发,多人开发,难免会有代码的冲突.彼此间谁也不能保证不会修改同个文件.如果修改了同个方法的内容.这时提交到svn是会提示代码冲突的. 当然,冲突是可控的,但不能避免.每次写代码 ...

  3. php join函数使用，很是方便

    以前数组转换成用逗号隔开的字符串都是自己写一个数组,最后还要去除多余的一个逗号,好麻烦. 无意中发现join函数,原来一句话就可以了. $_array = array('a','b','c','d', ...

  4. XMLHTTP使用具体解释

    XMLHTTP对象是Microsoft的MSXML开发包中带的一个用HTTP,XML协议訪问web资源的对象. 从MSXML3.0開始出现. 它在AJAX技术中主要用来从其它网络资源获取信息,然后由j ...

  5. iOS快速集成检查更新

    一直以为Appstore有了检查版本是否更新的机制,我们在APP上做这个更新功能会被拒,但是也有看到一些APP也是做了这个更新功能的.因为在网上没有找到完全正确的方法能获取到iTunes里的数据的,于 ...

  6. android131 360 05 手势触摸滑动，sim卡，开机启动的广播，手机联系人，SharedPreferences，拦截短信

    安卓手势触摸滑动: package com.itheima52.mobilesafe.activity; import android.app.Activity; import android.con ...

  7. 信号之sigsetjmp和siglongjmp函数

    在信号处理程序中经常调用longjmp函数以返回到程序的主循环中,而不是从该处理程序返回. 但是,调用longjmp有一个问题.当捕捉到一个信号时,进入信号捕捉函数,此时当前信号被自动地加到进程的信号 ...

  8. php实用函数整理

    1. 排序:array_multisort 可以对多位数组的多个字段进行排序 例子1如下: //自定义数组排序--按转发数从高到低排序 function sortSelfRc($oneLayer){ ...

  9. Ubuntu10.04下载并编译Android4.3源代码

    注:转载或引用请标明出处    http://blog.csdn.net/luzhenrong45/article/details/9719433 去年用Ubuntu10.10成功下载并编译Andro ...

  10. 自定义控件（视图）1期笔记01：View 和 ViewGroup

    1.View 和 ViewGroup 图解关系: 2. View 和 ViewGroup 关系和作用: (1) 关系: • 继承关系 • 组合关系 (2) 作用:      • View的作用: 提供 ...