zoukankan      html  css  js  c++  java
  • [Js]表格排序

    思路:遍历每个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>

  • 相关阅读:
    python学习(四)流程控制语句
    python学习(三)运算符
    python学习(二)数据类型转换
    python学习(一)基本数据类型
    mysql学习-mysql分页查询
    装饰器
    迭代器与生成器
    深入解析类对象与类实例的创建过程
    深入理解Python中的元类---metaclass
    flask源码解析之DispatcherMiddleware
  • 原文地址:https://www.cnblogs.com/zhangwenkan/p/3755430.html
Copyright © 2011-2022 走看看