<!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. configparser

    configparser configparser模块是python中用来处理类似于windows的ini格式文件, 一个ini文件的格式 [section] key = value

  2. 【Stage3D学习笔记续】真正的3D世界（一）：透视矩阵

    如果各位看官跟着我的学习笔记一路看过来的话,一定会吐槽我的,这都是什么3D啊?从头到尾整个都是在使用GPU绘制一堆2D图像而已,的确,之前我们一直使用正交矩阵利用GPU加速来实现2D世界的展示,算不上 ...

  3. 剑指OFFER之顺时针打印矩阵（九度OJ1391）

    题目描述: 输入一个矩阵,按照从外向里以顺时针的顺序依次打印出每一个数字,例如,如果输入如下矩阵: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 则依次打印出数字1,2 ...

  4. ThinkPHP中URL解析原理，以及URL路由使用教程！

    几个概念: THINKPHP 是一个MVC框架,使用PATHINFO解析出分组名,模块名,方法名,以及参数. PATHINFO:就是 http://localhost/index.php/Home/I ...

  5. HDU 5074 Hatsune Miku（DP)

    Problem Description Hatsune Miku is a popular virtual singer. It is very popular in both Japan and C ...

  6. WebService 设计总结

    接触过非常多电商的WebService,有种一看就蛋疼的设计,今天要从这个反例说一说 WebService 的设计. [WebMethod] public string QueryOrderDetai ...

  7. C 栈实例

    就近匹配: 应用1:就近匹配 几乎所有的编译器都具有检测括号是否匹配的能力 如何实现编译器中的符号成对检测? #include <stdio.h> ][]; ]; p = a[]; ; 算 ...

  8. 360开源的类Redis存储系统:Pika

    Pika 是 360 DBA 和基础架构组联合开发的类 Redis 存储系统,完全支持 Redis 协议,用户不需要修改任何代码,就可以将服务迁移至 Pika.有维护 Redis 经验的 DBA 维护 ...

  9. Android（java）学习笔记126：Android Studio中build.gradle简介

    1.首先我们直接上代码介绍: // Top-level build file where you can add configuration options common to all sub-pro ...

  10. html select用法总结

    本文将介绍select 原生的常用方法,这些都是经过测试,兼容ie6到ie10,及chrome,火狐等,也就是说大部分浏览器都兼容.如果大家发现有不兼容的情况,可以跟我留言. 我们对基本的用法了如指掌 ...