思路：遍历每个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. Monkey学习（3）如何在Android模拟器中安装apk

    1.运行SDK Manager,选择模拟器,并运行模拟器,我这里用的是已经配置好的模拟器“RedMI” 2.已启动好的模拟器“RedMI” 3.记住需要安装apk文件的位置,我这里放在了F盘的根目录下 ...

  2. Android Netty框架的使用

    Netty框架的使用 1 TCP开发范例 发送地址---192.168.31.241 发送端口号---9223 发送数据 { "userid":"mm910@mbk.co ...

  3. 华为 1.static有什么用途？（请至少说明两种）

    1.static有什么用途?(请至少说明两种) 1)在函数体,一个被声明为静态的变量在这一函数被调用过程中维持其值不变. 2) 在模块内(但在函数体外),一个被声明为静态的变量可以被模块内所用函数访问 ...

  4. Android_程序结构分析

    一.Android程序运行过程 二.Android项目结构  

  5. 在Windows和Linux上安装paramiko模块

    一.paramiko模块有什么用? paramiko是用python语言写的一个模块,遵循SSH2协议,支持以加密和认证的方式,进行远程服务器的连接.由于使用的是python这样的能够跨平台运行的语言 ...

  6. J2EE相关总结

    Java Commons The Java™ Tutorials: http://docs.oracle.com/javase/tutorial/index.html Java Platform, E ...

  7. 【CITE】C#默认以管理员身份运行程序实现代码

    //用于一种情况:C#软件打包后,在读写C盘文件时,会出现权限问题.使用管理员身份才可以运行 using System; using System.Collections.Generic; using ...

  8. bootstrap--双日历插件

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  9. css写宽为30%的正方形

    如何用纯css写一宽为30%的正方形,用到了padding属性: 会不会恍然大悟呢? <!DOCTYPE html> <html lang="en"> &l ...

  10. 一些用于数据整理的excel函数

    我们经常要从外部数据源(如数据库.文本文件或网页等)将数据导入excel中,但是此类数据往往比较混乱,无法满足我们的要求,因此在进行数据分析之前,需要将这些数据进行整理清洗,excel由于将数据的管理 ...