JQuery實現Table的tr上移下移功能
本文實例為大傢分享瞭JQuery實現Table的tr上移下移的具體代碼,供大傢參考,具體內容如下
今日份需求:實現表格行的上移下移,並更新排序值,效果如下:
話不多說直接上代碼,JQ實現挺簡單的
HTML代碼
<div> <span> <button class="layui-btn" id="doUp">上移</button><button class="layui-btn" id="doDown">下移</button> </span> </div> <table class="layui-table" style="width: 800px; margin-top: 3px;"> <thead> <tr> <th style="width: 100px; padding: 0px 0px; height: 32px;">姓名</th> <th style="width: 100px; padding: 0px 0px; height: 32px;">聯系電話</th> <th style="width: 20px; padding: 0px 0px; height: 32px;">排序值</th> </tr> </thead> <tbody id="demo"> <tr> <td>張三</td> <td>139000000</td> <td>1</td> </tr> <tr> <td>李四</td> <td>137000000</td> <td>2</td> </tr> <tr> <td>王五</td> <td>139000000</td> <td>3</td> </tr> <tr> <td>趙六</td> <td>139000000</td> <td>4</td> </tr> <tr> <td>孫七</td> <td>139000000</td> <td>5</td> </tr> <tr> <td>周八</td> <td>139000000</td> <td>6</td> </tr> </tbody> </table>
JQ代碼
<script> $(function () { //添加點選中行樣式方便查看效果 $("#demo tr").click(function () { if (!$(this).hasClass("selected")) { $("#demo tr.selected").removeClass("selected"); $(this).addClass("selected"); } }); //上移 $("#doUp").click(function () { Up(); }); //下移 $("#doDown").click(function () { Down(); }); }); //上移 function Up() { var currentOrderno;//當前排序值 var tempOrderno;//臨時值 var current = $("#demo tr.selected");//獲取當前行 currentOrderno = current.find('td:eq(2)').text(); var prev = current.prev();//當前tr的前一個元素 if (current.index() > 0) {//大於0表示簽名還有行,沒有到頂 //下面調換兩行的排序值,類似冒泡排序 tempOrderno = prev.find('td:eq(2)').text(); prev.find('td:eq(2)').text(currentOrderno); current.find('td:eq(2)').text(tempOrderno); //把選中行插入到上一行的前面 current.insertBefore(prev); } } //下移 function Down() { var currentOrderno; var tempOrderno; var current = $("#demo tr.selected"); currentOrderno = current.find('td:eq(2)').text(); var next = current.next();//當前tr的下一個元素 if (next.length > 0) {//大於0表示後面還有行,沒有到底 tempOrderno = next.find('td:eq(2)').text(); next.find('td:eq(2)').text(currentOrderno); current.find('td:eq(2)').text(tempOrderno); //把選中行插入到下一行的後面 current.insertAfter(next); } } </script>
以上就是本文的全部內容,希望對大傢的學習有所幫助,也希望大傢多多支持WalkonNet。