思路：遍历每个li，并把它们存放到数组中去，然后通过sort()方法进行排序，再插入

<body>
    <input type="button" value="排序按钮" id="btn1">
    <ul id="ul1">
        <li>58</li>
        <li>8</li>
        <li>31</li>
        <li>98</li>
        <li>75</li>
    </ul>

<script type="text/javascript">
    window.onload=function(){
        var oBtn=document.getElementById("btn1");
        var arr=[];
        var oUl=document.getElementById("ul1");
        var aLi=oUl.getElementsByTagName("li");
        var i;
        var bAsc=true;
        oBtn.onclick=function(){
            for(i=0;i<aLi.length;i++){
                arr[i]=aLi[i];
            }
            arr.sort(function(li1,li2){
                if(bAsc){
                    return parseInt(li1.innerHTML)-parseInt(li2.innerHTML);
                }
                else{
                    return parseInt(li2.innerHTML)-parseInt(li1.innerHTML);
                }
            });
            for(i=0;i<arr.length;i++){
                oUl.appendChild(arr[i]);              //appendChild实际上分两步   1.先移除父级 2.添加到新的父级 （添加到原本的父级就相当于把当前元素拿到队列的末尾）
            }
            if(bAsc){
                bAsc=false;
            }                                        ==>bAsc=!bAsc;    //简化写法
            else{
                bAsc=true;
            }
        };
    }
</script>
</body>

[Js]表格排序的更多相关文章

  1. JS表格排序

    var employees = [] employees[0] = { name: "George", age: 32, retiredate: "March 12, 2 ...

  2. js表格排序 & 去除字符串空格

    // a:列数 bool:排序升序判断参数 true false Str:支持多列 function newUnitSort(a, bool, str) { var oTable = document ...

  3. JS实现表格排序

    今天有点闲,写个小东西,使用JS实现点击表格标题栏实现自动排序功能,嘻嘻... 一.JS代码,文件名为code.js如下: (function($){ //插件 $.extend($,{ //命名空间 ...

  4. 案例学习总结：原生JS实现表格排序

    最近在学习js的表格排序,没想到看不起眼的表格排序实际上却暗含了众多JS知识点.在这里记录一下此次学习过程.希望对大家也有所帮助. 完整的表格排序涉及了下列这些知识点: call方法使用 sort方法 ...

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

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

  6. JS对表格排序(支持对序号，数字，字母，日期)

    JS对表格排序(支持对序号,数字,字母,日期) 前不久看到淘宝组件有"对表格排序的插件" 如想要看 可以看这个地址 http://gallery.kissyui.com/KSort ...

  7. js简单实现表格排序

    昨天看到一篇关于表格排序的随笔,鉴于本人还只会简单的js,不会使用封装,所以自己也试了一下写这个效果.可能不太优化,原理思路是:获取行对象tr,排序tr中要比较的对象td,排序后添加回tbody.如下 ...

  8. JS实现前台表格排序功能

    JS实现前台表格排序功能 虽然数据量不大的情况下,前台排序速度比较快,但一般情况下,我们的项目只使用后台排序,原因有二: 一是代码简单:二是前台JS排序对于有分页的情况无法处理. 前段时间,有个功能需 ...

  9. jQuery 表格排序插件 Tablesorter 使用

    jQuery 表格排序插件 Tablesorter 使用方式如下: 1.引入头文件(注意一定要把jQuery放在前面): <script src="lib/jquery-1.8.3.m ...

随机推荐

  1. JavaSE复习_3 继承

    △先默认初始化,在显示初始化,在构造函数初始化 △继承的弊端:代码的耦合性增加了. △子类不能继承父类的构造方法. △子类会拥有父类的私有成员变量,但是必须通过get,set方法访问. △super不 ...

  2. FSL安装

    本文介绍如何安装医学图像处理软件fsl. 安装环境:Win8和Ubuntu 14.04 LTS(双系统和虚拟机皆可) 1. 安装ubuntu 14.04 LTS 2. 打开终端,设置ip代理:expo ...

  3. 【服务器环境搭建-Centos】系统分区 待续

    df命令查看,显示/dev/vda,而不是sda或hda ,为什么? 虚拟机为了提升性能,一般使用virtio作为磁盘驱动,在虚拟机里面磁盘会显示成vda而不是传统的sda,有什么办法可以让他显示成s ...

  4. OpenGL的glTranslatef平移变换函数详解

    OpenGL的glTranslatef平移变换函数详解 glTranslated()和glTranslatef()这两个函数是定义一个平移矩阵,该矩阵与当前矩阵相乘,使后续的图形进行平移变换. 我们先 ...

  5. Oracle在Linux下使用异步IO（aio）配置

    1.首先用root用户安装以下必要的rpm包 # rpm -Uvh libaio-0.3.106-3.2.x86_64.rpm# rpm -Uvh libaio-devel-0.3.106-3.2.x ...

  6. spring源码深度解析-1核心实现

    xml配置文件的读取:1:通过集成字AbstractBeanDefinitionReader中的方法,来使用ResourceLoader将资源文件路径转换为对应的Resource文件2:通过Docum ...

  7. fetchField 和 fetchColumn

    public function fetchField($index = 0) { // Call PDOStatement::fetchColumn to fetch the field. retur ...

  8. wps的几个优点

    wps的几个优点 1.wps非常小巧,wps2011源文件38M,安装后160M,wps2010安装过后158M,工具栏.程序设置.模板可保存在一个文件里面,重装后用\WPS Office Perso ...

  9. js获取多个标签元素的内容，并根据元素的内容修改标签的属性

    <html > <head> <title>无标题文档</title> </head> <body> <div class ...

  10. 使用分布式数据库集群做大数据分析之OneProxy

    一.十亿数据,轻松秒出 实时监控领域有两个显著的特点,一是数据来源很多而且数据量大,有来自监控摄像头.GPS.智能设备等:二是需要实时处理.我们的客户在做实时处理时,就遇到这样的问题.客户的某个数据表 ...