思路：遍历每个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. Nginx基础知识之————多模块(非覆盖安装、RTMP在线人数实例安装测试)

    说明:已经安装好的nginx,需要添加一个未被编译安装的模块,需要怎么弄呢? 具体:这里以安装第三方nginx-rtmp-module和nginx-accesskey-2.0.3模块为例,nginx的 ...

  2. HDU5785 manacher+差分数组

    用manacher算法O(n)求出所有的回文半径.有了回文半径后,就可以求出L[i]表示以i结尾的回文串的起始位置的和R[i]表示以i起始的回文串的结尾位置的和,然后就可以求出答案了,这里要注意奇偶长 ...

  3. 什么是Plist文件

    直接将数据直接写在代码里面,不是一种合理的做法.如果数据经常改,就要经常翻开对应的代码进行修改,造成代码扩展性低 因此,可以考虑将经常变的数据放在文件中进行存储,程序启动后从文件中读取最新的数据.如果 ...

  4. Echarts柱形图颜色设置

    ECharts图为每个数据项配置颜色 (2014-11-12 15:52:53) 转载▼ 标签: 时尚 分类: 开发学习 其实给每个数据项配置很简单 只需要在series里面给data数组的每个元素设 ...

  5. Centos7 PHP7 编译安装 开机自启动

    1.PHP7.0.13下载 wget http://cn2.php.net/get/php-7.0.13.tar.gz/from/this/mirror 2.解压 .tar.gz 3. 进入目录 cd ...

  6. 转：如何学习SQL（第二部分：从关系角度理解SQL）

    转自:http://blog.163.com/mig3719@126/blog/static/285720652010950825538/ 6. 从关系角度理解SQL 6.1. 关系和表 众所周知,我 ...

  7. css编码规范

    css编码规范 https://segmentfault.com/a/1190000002460968 常用样式测试工具 W3C CSS validator:http://jigsaw.w3.org/ ...

  8. IE浏览器打印合格证相关问题

    0.打印机驱动,打印参数设置,首选项配置,数值都必须精确. 1.google浏览器死都不兼容,上下行之间会重叠. 解决方案:必须IE 2.IE 10,IE 11 需要开兼容性视图设置,添加该网站.不然 ...

  9. 微信公共平台php用$GLOBALS["HTTP_RAW_POST_DATA"]收不到信息解决方法

    http://www.cnblogs.com/shendiao/archive/2013/04/24/3041450.html <?php /** * wechat php test */ // ...

  10. MM中如何更改物料的评估类

    在SAP MM模块中,一物料XXX ,由原来的外购,变成厂内自制:评估类也由原来的7901 改为:7900 : 注:物料的评估类,对应一些帐号,对发生的为业,产生的数据,记录在相对的帐号里: 如要更改 ...