简单的排序功能

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. <经验杂谈>C#中一种最简单、最基本的反射（Reflection）：通过反射获取方法函数

    说起反射之前和很多用C#/.net的同仁们一样,相比于一般应用层对数据的增删改查总有点觉得深奥到难以理解.其实程序这东西,用过.实践过就很简单,我一直这么认为. 先说下概念:反射 Reflection ...

  2. Java数据结构漫谈－ArrayList

    ArrayList是一个基于数组实现的链表(List),这一点可以从源码中看出: transient Object[] elementData; // non-private to simplify ...

  3. 控制用户的访问之权限、角色【weber出品必属精品】

    权限的作用 限制用户对数据的访问 权限的分类 1. 系统权限:能够存取数据库的权限 2. 对象权限:操作数据库对象的内容 系统权限  1.1 如何创建用户: SQL> create user t ...

  4. Sys.WebForms.PageRequestManagerParserErrorException:无法分析从服务器收到的消息

    我引起此原因的功能如下: 在aspx页面添加按钮 JS方法: function downPPT() { $("#Btn_DownPPT").click();    } <bo ...

  5. Servlet编码和解码

    1.request.setCharacterencoding("XXX"); 前提是POST提交 在客户端编码对value的值进行编码之前,通知客户端用什么码表(XXX)编码 2. ...

  6. setInterval()、clearInterval()、setTimeout()和clearTimeout()js计数器方法

    原文地址:http://caibaojian.com/setinterval-settimeout.html window.setInterval()方法 介绍 周期性地调用一个函数(function ...

  7. jquery mobile转场时加载js失效

    jquery mobile拦截了所有的http请求,并使用ajax请求取代传统的http.请求发出后,框架会将请求的内容插入到页面中data- role="page"的部分,取代原 ...

  8. sgu Kalevich Strikes Back

    这道题就是求一个大矩形被n个矩形划分成n+1个部分的面积,这些矩形之间不会相交,可能包含.. #include <cstdio> #include <cstring> #inc ...

  9. hdu 1599 find the mincost route

    http://acm.hdu.edu.cn/showproblem.php?pid=1599 floyd找最小环. #include <cstdio> #include <cstri ...

  10. LeetCode_Palindrome Partitioning II

    Given a string s, partition s such that every substring of the partition is a palindrome. Return the ...