JQuery实现Table的tr上移下移功能
短信预约 -IT技能 免费直播动态提醒
本文实例为大家分享了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>以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程网。
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
