JavaScript 實現頁面元素(ul-li)的簡單排序


JavaScript 實現頁面元素(ul-li)的簡單排序

html頁面:

<input type="button" value="show" onclick="show()" />
    <ul id="ul1">
      <li>4</li>
      <li>3</li>
      <li>2</li>
      <li>1</li>
    </ul>

JavaScript代碼

function show(){
      var ul1=document.getElementById("ul1");
      //找出我們所有的li滴呀
      var lis=ul1.getElementsByTagName("li");
      //建立以新的數組滴呀
      var list=[];
      var liLen=lis.length;
      for(var i=0;i<liLen;i++){
         //這個就是我們添加的東西滴一  
          list[i]=lis[i];
      }
      //對數組進行排序滴呀
      list.sort(function (li1,li2){
          var n1=parseInt(li1.innerHTML);
          var n2=parseInt(li2.innerHTML);
          return n1-n2; //這樣來進行我們簡單的比較滴呀
      })
      
      //然后我們再appendChild 就可以實現我們基本的操作滴啊
      for(var j=0;j<liLen;j++){
         ul1.appendChild(list[j]); //數組是已經排好序滴啦;
         //一些都是很簡單的方法滴呀;
         //我要如何去做滴呀  
      }
  }

同樣的代碼,我們可以應用帶在我們的table表格排序中滴呀

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM