• [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>

  • 相关阅读:
    微信退款回调
    laravel5.5 自定义验证规则——手机验证RULE
    laravel5.5 延时队列的使用
    laravel 使用EasyWechat 3分钟完成微信支付(以APP支付为例)
    第三章预习
    预习2
    预习原码补码
    C语言ll作业01
    C语言寒假大作战04
    C语言寒假大作战03
  • 原文地址:https://www.cnblogs.com/zhangwenkan/p/3755430.html
Copyright © 2020-2023  润新知