JQuery實現(xiàn)Table的tr上移下移功能

更新時間：2022年02月22日 08:30:57 作者：林深時見祿

這篇文章主要為大家詳細介紹了JQuery實現(xiàn)Table的tr上移下移功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了JQuery實現(xiàn)Table的tr上移下移的具體代碼，供大家參考，具體內(nèi)容如下

今日份需求：實現(xiàn)表格行的上移下移，并更新排序值，效果如下：

話不多說直接上代碼，JQ實現(xiàn)挺簡單的

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;">聯(lián)系電話</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表示簽名還有行，沒有到頂
? ? ? ? ? ? //下面調(diào)換兩行的排序值，類似冒泡排序
? ? ? ? ? ? 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>

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: