zoukankan      html  css  js  c++  java
  • 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表格排序中滴呀

  • 相关阅读:
    C
    C
    你好,欢迎到这里来
    数组专题
    web前端的性能优化
    MornUI 源码阅读笔记
    application tips
    [转]就这样,创建了自己的运行时共享库(RSL)
    [转]glew, glee与 gl glu glut glx glext的区别和关系
    编码相关了解
  • 原文地址:https://www.cnblogs.com/mc67/p/5185038.html
Copyright © 2011-2022 走看看