JS学习之表格的排序简单实例

JS学习之表格的排序简单实例

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

以上这篇JS学习之表格的排序简单实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • JavaScript对象数组如何按指定属性和排序方向进行排序

    引子 在以数据为中心的信息系统中,以表格形式展示数据是在常见不过的方式了.对数据进行排序是必不可少的功能.排序可以分为按单个字段排序和按多个字段不同排序方向排序.单字段排序局限性较大,不能满足用户对数据的关注点变化的需求,而多字段排序就可以较好的弥补这个缺陷. 多字段排序,实现的方式从大的层面上可以分为后端实现和前端实现. 后端排序 后端实现排序可以在数据库层面实现或者在应用程序层面实现. 数据库层面实现多字段排序非常简单,使用SQL的排序指令"Order By"即可--Order B

  • 基于JS实现数字+字母+中文的混合排序方法

    基于JS实现数字+字母+中文的混合排序方法

    在上篇文章给大家介绍了JavaScript sort数组排序方法和自我实现排序方法小结,用自己的方法实现了数字数组的排序. 当然,实际运用中,我还是会使用sort方法更加方便.但是,我上一篇博文,仅仅是实现了数字排序,而srot方法默认可是能给字母实现排序的哦!而我的代码只能排序数字,看起来还是弱弱的. 所以,我得加上能排字母甚至中文的排序方法. 实现代码 $(function(){ var arr = ["Jack","Book","Fung"

  • 分享javascript实现的冒泡排序代码并优化

    冒泡排序:就是将一个数组中的元素按照从大到小或者从小到大的顺序进行排列. var array=[9,8,7,6,5,4,3,2,1]; 第一轮比较:8,7,6,5,4,3,2,1,9      交换了8次        i=0   j=array.length-1-i 第二轮比较:7,6,5,4,3,2,1,8,9      交换了7次        i=1   j=array.length-1-i 第三轮比较:6,5,4,3,2,1,7,8,9      交换了6次        i=2  

  • JavaScript sort数组排序方法和自我实现排序方法小结

    JavaScript sort数组排序方法和自我实现排序方法小结

     前言 针对一个数组进行排序,一个很常见的需求.尤其在后端.当然,前端也是有这个需求的. 当然,数组排序,是有现成的方法的.就是sort()方法. 我们先开看下这个. 标准答案,sort方法 var arr = [45,98,67,57,85,6,58,83,48,18]; console.log('原数组'); console.log(arr); console.log('sort方法从小到大排序'); console.log(arr.sort(function(a,b){return a-b

  • JavaScript对象数组排序实例方法浅析

    在javascript中实现多维数组.对象数组排序,基本上都是用原生的sort()方法,用于对数组的元素进行排序. 其基本的用法就不说了,先看个简单的排序例子: //Sort alphabetically and ascending: var myarray=["Bob", "Bully", "Amy"] myarray.sort() //Array now becomes ["Amy", "Bob", &

  • JavaScript实现in-place思想的快速排序方法

    快速排序,又称划分交换排序.以分治法为策略实现的快速排序算法. 本文主要要谈的是利用javascript实现in-place思想的快速排序 分治法: 在计算机科学中,分治法是建基于多项分支递归的一种很重要的算法范式.字面上的解释是"分而治之",就是把一个复杂的问题分成两个或更多的相同或相似的子问题,直到最后子问题可以简单的直接求解,原问题的解即子问题的解的合并.(摘自维基百科) 快速排序的思想 数组中指定一个元素作为标尺,比它大的放到该元素后面,比它小的放到该元素前面,如此重复直至全部

  • 深入理解js数组的sort排序

    废话少说直接上代码: <body> <div> sort()对数组排序,不开辟新的内存,对原有数组元素进行调换 </div> <div id="showBox"> 1.简单数组简单排序 <script type="text/javascript"> var arrSimple=new Array(1,8,7,6); arrSimple.sort(); document.writeln(arrSimple.j

  • JS实现table表格数据排序功能(可支持动态数据+分页效果)

    asp.net会经常遇到分页的效果,尤其是希望实现静态的html分页排序(html分页相信大家都已经有自己的解决方案.在这里就不多说).我写了一个简单的Demo排序. 数据就是字母和数字两组.(汉字需要找到asc码) 原理就是利用数组自带的sort排序,进行表格重组.已在.net mvc 中测试过.支持分页.(申明一点.只对当前页面数据排序 无刷新,对所有页面排序的话,肯定需要刷新.这点我还在解决中.)希望有新想法的高手们,给下指点. 下面把html的代码贴出来: <!DOCTYPE HTML

  • JS学习之表格的排序简单实例

    JS学习之表格的排序简单实例 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <input id="btn1" type="button" value="排序"> <table id="

  • 用js实现放大镜的效果的简单实例

    用js实现放大镜的效果的简单实例

    第一次发博客,还有点小激动,本人现在正在天津上大学,希望以后从事前端这一行业,学习的时间不长,写博客为了记录自己的学习过程和收获,当然也算是巩固.可能写的东西不会像大牛那样高大上,只是一些基本的内容,当然我也会收藏一些我认为好的,不错的文章(其实最主要是我能看懂....).我相信以后自己也能够写出高大上的东西.加油! 废话说的有点多,说正事.前几天看了一段潭州教育的教学视频,其中的老师是用JQuery实现放大镜的效果(老师讲的是在是太慢,各种乱扯,跳着看的).由于我还没有好好的学习过JQuery

  • 纯js实现html转pdf的简单实例(推荐)

    项目开发中遇到了一个变态需求,需要把一整个页面导出为pdf格式,而且要保留页面上的所有的表格.svg图片和样式. 简而言之,就是希望像截图一样,把整个页面截下来,然后保存成pdf. 咋不上天呢-- 查了一下,能够实现html转pdf的方法还是挺多的,大概有以下几种: 1.大部分浏览器就有这个功能.然而我们客户要的可不是这个,人家要的是能够在系统中主动触发的导出为pdf功能,所以这种方案pass. 2.利用第三方工具.我找到了一种利用wkhtmltopdf这种工具来导出的方案,自己在我们的项目中试

  • Python实现冒泡，插入，选择排序简单实例

    本文所述的Python实现冒泡,插入,选择排序简单实例比较适合Python初学者从基础开始学习数据结构和算法,示例简单易懂,具体代码如下: # -*- coding: cp936 -*- #python插入排序 def insertSort(a): for i in range(len(a)-1): #print a,i for j in range(i+1,len(a)): if a[i]>a[j]: temp = a[i] a[i] = a[j] a[j] = temp return a #

  • 原生JS实现-星级评分系统的简单实例

    今天我又写了个很酷的实例:星级评分系统(可自定义星星个数.显示信息) sufuStar.star(); 使用默认值5个星星,默认信息 var msg = [........]; sufuStar.star(10,msg); 自定义星星个数为10.显示信息msg格式参考默认值,条数必须和星星个数一致: 自己实现一些实例,有个好处,能增加应用各知识点的熟练度,还能检验出自己的薄弱项!一经发现,立即翻API文档恶补! 不知道是不是我太笨,这个实例居然写了整整一天! 不废话了,先说下这个实例涉及的知识点

  • Node.js学习之TCP/IP数据通讯(实例讲解)

    Node.js学习之TCP/IP数据通讯(实例讲解)

    1.使用net模块实现基于TCP的数据通讯 提供了一个net模块,专用于实现TCP服务器与TCP客户端之间的通信 1.1创建TCP服务器 在Node.js利用net模块创建TCP服务器 var server = net.createServer([options],[connectionListener]) //options:false当TCP服务器接收到客户端发送的一个FIN包时将会回发一个FIN包 true当TCP服务器接收到客户端发送的一个FIN包时将不会回发FIN包,这使得TCP服务器

  • js判断文件格式及大小的简单实例(必看)

    实例如下: //判断照片大小 function getPhotoSize(obj){ photoExt=obj.value.substr(obj.value.lastIndexOf(".")).toLowerCase();//获得文件后缀名 if(photoExt!='.jpg'){ alert("请上传后缀名为jpg的照片!"); return false; } var fileSize = 0; var isIE = /msie/i.test(navigator

  • MySQL按照汉字的拼音排序简单实例

    如果存储姓名的字段采用的是GBK字符集,那就好办了,因为GBK内码编码时本身就采用了拼音排序的方法(常用一级汉字3755个采用拼音排序,二级汉字就不是了,但考虑到人名等都是常用汉字,因此只是针对一级汉字能正确排序也够用了). 直接在查询语句后面 添加 order by name asc; 查询结果按照姓氏的升序排序: 如果存储姓名的字段采用的是 utf8字符集,需要在排序的时候对字段进行转码:对于的代码是  order by convert(name using gbk) asc; 同样,查询的

  • 模拟javascript中的sort排序(简单实例)

    一.javascript中sort对数据进行排序的原理 sort() 方法对数组的元素做原地的排序,并返回这个数组. sort 可能不是稳定的.默认按照字符串的Unicode码位点排序; 语法:arr.sort([compareFunction]) 参数 compareFunction 可选.用来指定按某种顺序进行排列的函数.如果省略,元素按照转换为的字符串的诸个字符的Unicode位点进行排序. 如果 compareFunction(a, b) 小于 0 ,那么 a 会被排列到 b 之前: 如

随机推荐