本文实例为大家分享了Jquery实现Table的tr上移下移的具体代码,供大家参考,具体内容如下 今日份需求:实现表格行的上移下移,并更新排序值,效果如下: 话不多说直接上代码,J
本文实例为大家分享了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>
--结束END--
本文标题: JQuery实现Table的tr上移下移功能
本文链接: https://lsjlt.com/news/139958.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0