[Js]表格排序

2022-11-22 19:46:06

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