JQ完成表格单元格顺序的上移下调

Posted 2020-08-20 半路独行

如有指教及疑问,欢迎留言

 html代码

 1    <table class="exampletable">
 2                         <thead>
 3                             <tr>
 4                                 <th>单元格</th>
 5                                 <th>操作</th>
 6                             </tr>
 7                         </thead>
 8                         <tbody>
 9                             <tr>
10                                 <td><input type="text" name="name" value="单元格一" /></td>
11                                 <td>
12                                     <button class="orderindex upindex" data-index="-1">上移</button>
13                                     <button class="orderindex downindex" data-index="1">下降</button>
14                                 </td>
15                             </tr>  
16                              <tr>
17                                 <td><input  type="text" name="name" value="单元格二" /></td>
18                                 <td>
19                                     <button class="orderindex upindex" data-index="-1">上移</button>
20                                     <button class="orderindex downindex" data-index="1">下降</button>                
21                                 </td>
22                             </tr>
23                             <tr>
24                                 <td><input type="text" name="name" value="单元格三" /></td>
25                                 <td>
26                                     <button class="orderindex upindex" data-index="-1">上移</button>
27                                     <button class="orderindex downindex" data-index="1">下降</button>
28                                 </td>
29                             </tr>
30                         </tbody>
31                     </table>

JQ代码

 1     $(".exampletable tbody").on(‘click‘, ‘.orderindex‘, function () {
 2         var $thistr = $(this).parents("tr").first();
 3         var $thistbodytr = $(this).parents("tbody").find(‘tr‘)
 4         var nowindex = $thistbodytr.index($thistr)
 5         var content = "<tr>" + $thistr.html() + "</tr>";
 6         var indexstep = parseInt($(this).attr("data-index"))
 7         var lastindex = nowindex + indexstep;
 8         var $tr = $thistbodytr.eq(lastindex);
 9         ($(this).hasClass("upindex") == true) ? $(content).insertBefore($tr) : $(content).insertAfter($tr);
10         $thistr.remove();
11     });

 此代码没有考虑首单元格不能上移及尾单元格不能下调的问题.

 ps(纯凑字数):菜鸟一枚,今天专门为了这个问题搜了挺久,发现,简单的问题往往被写的很复杂,代码本来就是追求简介明了,不需要绕弯子,为何只需要举个简单的列子,加一些代码说明就可以解决的问题,却是在开篇的时候就用大堆的代码显示自己的厉害!以此为戒,今后的学习和笔记,力求简洁的代码,清晰地思路(均在能力之内)!