首页 > 代码库 > JQ完成表格单元格顺序的上移下调
JQ完成表格单元格顺序的上移下调
如有指教及疑问,欢迎留言
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=http://www.mamicode.com/"单元格一" /></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=http://www.mamicode.com/"单元格二" /></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=http://www.mamicode.com/"单元格三" /></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(纯凑字数):菜鸟一枚,今天专门为了这个问题搜了挺久,发现,简单的问题往往被写的很复杂,代码本来就是追求简介明了,不需要绕弯子,为何只需要举个简单的列子,加一些代码说明就可以解决的问题,却是在开篇的时候就用大堆的代码显示自己的厉害!以此为戒,今后的学习和笔记,力求简洁的代码,清晰地思路(均在能力之内)!
JQ完成表格单元格顺序的上移下调
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。