首页 > 编程语言 > 详细

JavaScript 实现页面元素(ul-li)的简单排序

时间:2016-02-08 17:25:12      阅读:118      评论:0      收藏:0      [点我收藏+]

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表格排序中滴呀

 

JavaScript 实现页面元素(ul-li)的简单排序

原文:http://www.cnblogs.com/mc67/p/5185038.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!