js实现页面内元素移动和排序

最新推荐文章于 2024-05-10 09:33:54 发布

还没想好1234

最新推荐文章于 2024-05-10 09:33:54 发布

阅读量4k

点赞数

分类专栏： JS

本文链接：https://blog.csdn.net/qq_33420835/article/details/82118299

版权

JS 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

元素的移动

  <script>
        window.onload=function()
        {
            var oul1=document.getElementById("ul1");
            var oul2=document.getElementById("ul2");
            var oBtn=document.getElementById("btn1");
            oBtn.onclick=function () {
                var oLi=oul1.children[0];
                oul2.appendChild(oLi);
                //appendChild会将元素从原有的父元素删除，然后添加
            }
        }
    </script>

============》

另一种巧妙的实现

    <script>
        window.onload=function()
        {
            var oul1=document.getElementById("ul1");
            var oul2=document.getElementById("ul2");
            var oBtn=document.getElementById("btn1");
            oBtn.onclick=function () {
                var oLi=oul1.children[0];
                oul1.appendChild(oLi);
                //appendChild会将元素从原有的父元素删除，然后再添加到原来的父元素内
            }
        }
    </script>

排序

基本思想就是获取所有li元素，然后根据值进行排序，我所实现的是每点击一下，在点击第i下的时候，就将排好序内的元素的第i个放在ul的最后边。

   <script>
        window.onload=function()
        {
            var oul1=document.getElementById("ul1");
            var oBtn=document.getElementById("btn1");

                var oLi=oul1.getElementsByTagName("li");
                var arr=[];
                for(var i=0;i<oLi.length;i++)
                    arr[i]=oLi[i];
                arr.sort(function (li1,li2) {
                    var n1=parseInt(li1.innerHTML);
                    var n2=parseInt(li2.innerHTML);
                    return n1-n2;
                });
                var i=0;
            oBtn.onclick=function () {
                oul1.appendChild(arr[i]);
                i++;
            }
        }
    </script>

========》

表格的排序

=====》

 <script>
        window.onload=function () {
            var btn1=document.getElementById("btn1");
            var tab1=document.getElementById("tabl1");
          btn1.onclick=function () {
              var arr=[];
              for(var i=0;i<tab1.tBodies[0].rows.length;i++)
                  arr[i]=tabl1.tBodies[0].rows[i];
              arr.sort(function (tr1,tr2) {
                  var n1=tr1.cells[1].innerHTML;
                  var n2=tr2.cells[1].innerHTML;
                  return n1-n2;
              });
              for(var i=0;i<arr.length;i++)
              {
                  tab1.appendChild(arr[i]);
              }

          }
        }
    </script>
</head>
<body>
<input id="btn1"  type="button" value="排序">
<table id="tabl1" border="1" width="500">
    <thead>
    <td>姓名</td>
    <td>年龄</td>
    <td>性别</td>
    </thead>
    <tbody>
    <tr>
        <td>XiaoZhang</td><td>18</td><td>男</td>
    </tr>
    <tr>
        <td>XiaoYun</td><td>26</td><td>男</td>
    </tr>
    <tr>
        <td>XiaoLei</td><td>23</td><td>男</td>
    </tr>
    </tbody>
</table>
</body>

还没想好1234

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
1
评论
js实现页面内元素移动和排序

元素的移动 &lt;script&gt; window.onload=function() { var oul1=document.getElementById("ul1"); var oul2=document.getElementById("ul2"); var oBtn=docu...
复制链接

扫一扫