思路：遍历每个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. alloc && afree

    #define ALLOCSIZE 10000 static char allocbuf[ALLOCSIZE]; static char *allocp = allocbuf; char *alloc ...

  2. QQReg.java

    import java.awt.*; import javax.swing.*; public class QQReg extends JFrame{ public static void main( ...

  3. SQL 总结

    1. select 使用正则表达式 正则表达式的模式串, 与linux基本相同, oracle提供以下4个函数来支持正则表达式: REGEXP_LIKE: 比较一个字符串是否与正则表达式匹配(看来是返 ...

  4. maven核心概念4

    一.Maven坐标 1.1.什么是坐标? 在平面几何中坐标(x,y)可以标识平面中唯一的一点. 1.2.Maven坐标主要组成 groupId:组织标识(包名) artifactId:项目名称 ver ...

  5. Hibernate的集合映射与sort、order-by属性

    [Hibernate]Hibernate的集合映射与sort.order-by属性 常用集合Set.List.Map,相信大家都很熟悉,面试中也会经常问.Set和List都继承了Collection接 ...

  6. [js] 非常好的面试题，学习了。。

    原文链接:http://www.cnblogs.com/xxcanghai/p/5189353.html

  7. java 文件操作

    1.按行读取 File file = new File(“your path”); BufferedReader reader = null; try { //System.out.println(& ...

  8. hiho_1057_performance_log

    题目大意 给出一个函数调用日志,判断日志是否合法,且求出合法日志中函数调用的时间长度. 题目链接:performance log 题目分析 首先需要清除非法日志的几种情形: (1)日志的时间戳不是按照 ...

  9. PHP 递归的密码

    http://www.cnsecer.com/4146.html 说实话 真的很炫 好像还是不好理解啊

  10. unity入门笔记

    我于2010年4月1日硕士毕业加入完美时空, 至今5年整.刚刚从一家公司的微端(就是端游技术+页游思想, 具体点就是c++开发, directX渲染, 资源采取所需才会下载)项目的前端主程职位离职, ...