PHP jquery tr随ID的大小排序

最新推荐文章于 2021-04-03 00:29:50 发布

原创最新推荐文章于 2021-04-03 00:29:50 发布 · 698 阅读

0 ·

CC 4.0 BY-SA版权

PHP 专栏收录该内容

7 篇文章

订阅专栏

本文介绍了一种使用PHP和JavaScript实现商品列表动态排序的方法。通过客户端JavaScript操作DOM元素完成商品行的顺序调整，并提供了倒叙和顺序两种排序按钮。此外，还集成了分页功能以方便浏览大量商品。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<table border="1" id="con">
           <tr>
               <td>选项</td>
               <td>序号</td>
               <td>商品名称</td>
           </tr>
           <?php foreach($goods as $k=>$v){?>
           <tr id="<?=$v['id']?>">
               <td><input type="checkbox" name="xuan" value="<?=$v['id']?>"></td>
               <td><input type="text" name="paixu" class="paixu" value="<?=$v['id']?>" ></td>
               <td><?=$v['name']?></td>
           </tr>
           <?php }?>
           <tr id="end">
               <td><button onclick="paixu()" >倒叙</button>
               <button onclick="daopaixu()" >顺序</button></td>
               <td>
                   <?= LinkPager::widget([
                            'pagination' => $pages,
                            'firstPageLabel'=>"首页",
                            'prevPageLabel'=>'上一页',
                            'nextPageLabel'=>'下一页',
                            'lastPageLabel'=>'尾页',
                            'maxButtonCount' => false
                       ]);?>
               </td>
           </tr>
       </table>

   $(".paixu").blur(function(){
       var val=$(this).val();
       $(this).parent().parent().attr("id",val);
   })

   function paixu(){
       var paixu="";
       var id="";
       var arr=[];
       var tr=[];
       var i=0;
       $("input[type='text']").each(function () {
           arr[i]=$(this).val();
           i++;
           id=$(this).val();
           tr[id]=$("#"+id);
           $("#"+id).remove();
        });
       arr = arr.sort(function(a,b){
          return b-a;
       });
       for(var j in arr){
           id=arr[j];
           $("#end").before(tr[id]);
       }
       $("#xianshi").html("<button onclick='daopaixu()' >排序</button>");
   }
       function daopaixu(){
       var paixu="";
       var id="";
       var arr=[];
       var tr=[];
       var i=0;
       $("input[type='text']").each(function () {
           arr[i]=$(this).val();
           i++;
           id=$(this).val();
           tr[id]=$("#"+id);
           $("#"+id).remove();
        });
       arr = arr.sort(function(a,b){
          return a-b;
       });
       for(var j in arr){
           id=arr[j];
           $("#end").before(tr[id]);
       }
       $("#xianshi").html("<button onclick='paixu()' >排序</button>");
   }
</script>