简单的排序功能

HTML代码：

<body>

<input id="btn1" type="button" value="排序"/>

<table id="tab1" border="1" width="500">

  <thead>

     <td>ID</td>

     <td>姓名</td>

     <td>年龄</td>

     <td>操作</td>

  </thead

  <tbody>

    <tr>

     <td>4</td>

     <td>张三</td>

     <td>25</td>

     <td></td>

    </tr>

    <tr>

     <td>2</td>

     <td>李四</td>

     <td>26</td>

     <td>删除</td>

    </tr>

    <tr>

     <td>5</td>

     <td>王四</td>

     <td>30</td>

     <td></td>

    </tr>

    <tr>

     <td>1</td>

     <td>刘三</td>

     <td>20</td>

     <td></td>

    </tr>

    <tr>

     <td>31</td>

     <td>赵六</td>

     <td>26</td>

     <td></td>

    </tr>

     <tr>

     <td>68</td>

     <td>赵六</td>

     <td>26</td>

     <td></td>

    </tr>

     <tr>

     <td>32</td>

     <td>赵六</td>

     <td>26</td>

     <td></td>

    </tr>

     <tr>

     <td>75</td>

     <td>赵六</td>

     <td>26</td>

     <td></td>

    </tr>

     <tr>

     <td>45</td>

     <td>赵六</td>

     <td>26</td>

     <td></td>

    </tr>

     <tr>

     <td>63</td>

     <td>赵六</td>

     <td>26</td>

     <td></td>

    </tr>

     <tr>

     <td>89</td>

     <td>赵六</td>

     <td>26</td>

     <td></td>

    </tr>

     <tr>

     <td>52</td>

     <td>赵六</td>

     <td>26</td>

     <td></td>

    </tr>

  </tbody>

</table>

</body>

js代码

<script>

  window.onload=function()

  {

    var oTab=document.getElementById('tab1');

    var oBtn=document.getElementById('btn1'); 

    oBtn.onclick=function()

    {

        var arr=[];

        for(var 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(var i=0;i<arr.length;i++)

        {

            oTab.tBodies[0].appendChild(arr[i]);

        }

    };

  };

</script>

运行以上代码 之前的效果图

运行后的效果

js简单排序的更多相关文章

  1. Table Dragger - 简单的 JS 拖放排序表格插件

    Table Dragger 是一个极简的实现拖放排序的表格插件,纯 JavaScript 库,不依赖 jQuery.用于构建操作方便的拖放排序功能,超级容易设置,有平滑的动画,支持触摸事件. 在线演示 ...

  2. 转：js,jQuery 排序的实现,网页标签排序的实现,标签排序

    js,jQuery 排序的实现: 重点: 想要实现排序,最简单的方法就是 先把标签用jQuery读进对象数组 用js排序好对象数组 (针对对象数组进行排序, 不要试图直接对网页的内容进行直接更改) 用 ...

  3. JS简单实现：根据奖品权重计算中奖概率实现抽奖的方法

    本文主要介绍:使用 JS 根据奖品权重计算中奖概率实现抽奖的方法. 一.示例场景 1.1.设置抽奖活动的奖项名称 奖项名称:["一等奖", "二等奖", &qu ...

  4. js简单 图片版时钟，带翻转效果

    js简单 图片版时钟,带翻转效果 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"& ...

  5. js简单操作Cookie

    贴一段js简单操作Cookie的代码: //获取指定名称的cookie的值 function getCookie(objName) { var arrStr = document.cookie.spl ...

  6. js简单弹出层、遮罩层

    <html> <head> <title>js简单弹出层</title> <style> /*阴影边框效果*/ .box-shadow-1 ...

  7. Tourist.js – 简单灵活的操作指南和导航插件

    Tourist.js 是一个基于 Backbone 和 jQuery 开发的轻量库,帮助你在应用程序创建简单易用的操作指南和导航功能.相比网站,它更适合用于复杂的,单页网站类型的应用程序.Touris ...

  8. js简单显示和隐藏div，触发超链接，动态更改button值，setInterval（）简单使用，jquery easyui弹出框简单使用 .

    js简单显示和隐藏div .<!DOCTYPE html> .<html> .<head> .<meta charset="UTF-8"& ...

  9. Java数据结构和算法之数组与简单排序

    一.数组于简单排序 数组 数组(array)是相同类型变量的集合,可以使用共同的名字引用它.数组可被定义为任何类型,可以是一维或多维.数组中的一个特别要素是通过下标来访问它.数组提供了一种将有联系的信 ...

随机推荐

  1. Linux 统计代码行数命令

    wc -l `find . -name '*.js'` wc -l `find . -regex ".*\.js"`

  2. listener笔记

    listener 分四步: 在被观察者类中创建 onXXListener Interface,包含一个方法:xxxListener(object o),参数根据需要观察者需要设定. public in ...

  3. 《第一行代码》学习笔记6－活动Activity（4）

    1.SecondActivity不是主活动,故不需要配置标签里的内容. 2.Intent是Android程序中各组件之间进行交互的一种重要方式,一般可被用于 启动活动,启动服务,以及发送广播等.Int ...

  4. 工欲善其事必先利其器---SQL在线可视化模型设计，（还可学习拖拽知识）

    作为技术人员,在开发项目中,不可避免的要跟数据库打交道,一个完整的项目正常情况下是讨论完整体需求,有了大致的框框在脑海中后,是需要设计合理的数据库的,这时会有其他的专业的UML建模工具可以使用, 但是 ...

  5. 客户Oracle数据库在插入数据的时候报超出最大长度的错误（规避风险）

    背景: 项目使用oracle数据,在开发环境测试一些正常.项目部署到客户的服务器上后,系统在添加数据的时候报错.输出错误信息,发现是“超出最大长度”的异常. 但是按照数据库的设计,添加的数据应该在允许 ...

  6. angularjs字符串插值（$interpolate）

    <!DOCTYPE html> <html lang="zh-CN" ng-app="app"> <head> <me ...

  7. 1、发布C++实现的TCP网络框架Khala

    1.Khala简介 Khala(卡拉)是用C++实现的TCP网络框架.底层采用muduo网络库作为网络IO+线程模型,并封装实现了网络实现与业务逻辑分离的多线程网络框架,具有超时退出.多设备多事件注册 ...

  8. Java学习笔记--Swing用户界面组件

    很多与AWT类似. 事件处理参考:Java学习笔记--AWT事件处理 1.设计模式: 模型:存储内容视图:显示内容控制器:处理用户输入· 2. 文本输入常用组件 2.1 文本域: JLabel lab ...

  9. ubuntu下查看IP Gateway DNS信息

    使用nm-tool命令 在最底下有一行: IPv4 Settings: Address: 192.168.0.166 Prefix: (255.255.255.0) Gateway: 192.168. ...

  10. cf C. Magic Formulas

    http://codeforces.com/contest/424/problem/C #include <cstdio> #include <cstring> #includ ...