<!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. USACO Feb. 2012

    Moo 找规律 吧 第一个是很久以前自己写的递归 #include<stdio.h> __int64 n; __int64 dfs(__int64 l,__int64 r,__int64 ...

  2. vs2015 配置opencv3.0遇到的问题

    1.问题 严重性 代码 说明 项目 文件 行 禁止显示状态 错误 C2872 "ACCESS_MASK": 不明确的符号 FaceFeature_GSF C:\Program Fi ...

  3. Java Web连接各种数据库方式汇总

    1.Oracle数据库(thin模式) Class.forName("oracle.jdbc.driver.OracleDriver").newInstance(); String ...

  4. The maximum number of cell styles was exceeded. You can define up to 4000 styles

    POI操作Excel中,导出的数据不是很大时,则不会有问题,而数据很多或者比较多时, 就会报以下的错误,是由于cell styles太多create造成,故一般可以把cellstyle设置放到循环外面 ...

  5. 使用Knoctout.分页

    要点:点击标签翻页部分时,pageValue自动加1. 1.api中的方法 public ArticleListModel Get(int page,string _class) { var list ...

  6. Sublime Text 3 安装插件管理 Package Control

    自动安装: 1.通过快捷键 ctrl+` 或者 View > Show Console 菜单打开控制台 2.粘贴对应版本的代码后回车安装 适用于 Sublime Text 3: import   ...

  7. [React Native] Build a Separator UI component

    In this lesson we'll create a reusable React Native separator component which manages it's own style ...

  8. 50个Android开发技巧(02 延迟载入和避免反复渲染视图)

    当你在Application中创建复杂的布局时.页面的渲染过程也变得更加缓慢. 此时,我们须要利用 <include />标签(避免反复渲染)和 ViewStub类(延迟载入)来优化我们的 ...

  9. PAT 1015

    1015. Reversible Primes (20) A reversible prime in any number system is a prime whose "reverse& ...

  10. Android进阶笔记04：Android进程间通讯（IPC）之Messenger

    一. Android进程间通讯之Messenger 的引入 (1)引言:      平时一说进程间通讯,大家都会想到AIDL,其实messenger和AIDL作用一样,都可以进行进程间通讯.它是基于消 ...