js实现table行上下移动,并实现数据的排序
发表于:2023-02-20 22:43:47浏览:1588次
对页面的table表格进行上下移动排序,移动操作不写入数据库,最后对操作统一保存。下面是详细代码:
html代码:
<table class="layui-table layui-table-min">
<tbody>
<tr>
<th width="100">编号</th>
<th width="100">类型</th>
<th>名称</th>
<th width="150">课时时长</th>
<th width="150">操作</th>
</tr>
<tr class="queue">
<td>1001</td>
<td>视频</td>
<td style="text-align:left;">回顾三先天曾合招过的战役,曾多次拯救苦境</td>
<td>5小时12分钟36秒</td>
<td>
<div class="layui-btn-group">
<span class="layui-btn layui-btn-xs question-up">上移</span>
<span class="layui-btn layui-btn-normal layui-btn-xs question-down">下移</span>
<span class="layui-btn layui-btn-xs layui-btn-danger question-del" data-mid="1001">删除</span>
</div>
</td>
</tr>
<tr class="queue">
<td>1002</td>
<td>Word</td>
<td style="text-align:left;">霹雳2021年强档大作《碧血玄黄》登场人物介绍</td>
<td>4小时36分钟56秒</td>
<td>
<div class="layui-btn-group">
<span class="layui-btn layui-btn-xs question-up">上移</span>
<span class="layui-btn layui-btn-normal layui-btn-xs question-down">下移</span>
<span class="layui-btn layui-btn-xs layui-btn-danger question-del" data-mid="1002">删除</span>
</div>
</td>
</tr>
<tr class="queue">
<td>1000</td>
<td>PDF</td>
<td style="text-align:left;">意琦行,倦收天双双黑化,正道战力堪忧</td>
<td>6小时59分钟59秒</td>
<td>
<div class="layui-btn-group">
<span class="layui-btn layui-btn-xs question-up">上移</span>
<span class="layui-btn layui-btn-normal layui-btn-xs question-down">下移</span>
<span class="layui-btn layui-btn-xs layui-btn-danger question-del" data-mid="1000">删除</span>
</div>
</td>
</tr>
</tbody>
</table>
javascript代码:
$('#questionDiv').on('click','.question-del',function(){
let qBox = $(this).parents('.question-item');
$(this).parents('tr').remove();
set_mids(qBox)
})
$('#questionDiv').on('click','.question-up',function(e){
let obj = $(e.target).closest('tr');
let qBox = $(this).parents('.question-item');
tr_pre($(obj[0]),qBox);
})
$('#questionDiv').on('click','.question-down',function(e){
var obj = $(e.target).closest('tr');
let qBox = $(this).parents('.question-item');
tr_next($(obj[0]),qBox);
})
function set_mids(qBox){
let items = qBox.find('.question-del');
let ids = [];
if(items.length>0){
items.each(function(index,item){
ids.push($(item).data('mid'));
})
}else{
qBox.find('table').append('<tr class="question-none"><td colspan="5">请选择章节内容</td></tr>');
}
qBox.find('[name="mids[]"]').val(ids.join(','));
}
function tr_pre(o,qBox) {
var pres = o.prevAll('tr.queue');
if (pres.length > 0) {
var tmp = o.clone(true);
var oo = pres[0];
o.remove();
$(oo).before(tmp);
set_mids(qBox);
}
else{
layer.msg('已经第一个了');
}
}
function tr_next(o,qBox) {
var nexts = o.nextAll('tr.queue');
if (nexts.length > 0) {
var tmp = o.clone(true);
var oo = nexts[0];
o.remove();
$(oo).after(tmp);
set_mids(qBox);
}else{
layer.msg('已经最后一个了');
}
}
推荐文章
- PHP中,如果存在继承关系,其中子类和父类都定义了构造函数__construct(),怎么处理?
- php使用AES对部分代码进行加密
- ThinkPHP6判断HTTP的请求类型是GET,POST,PUT,DELETE或者HEAD
- Thinkphp6使用Dompdf将HTML转换为PDF,并且支持中文
- ThinkPHP数据查询去重distinct和group by方法
- 开源的度量分析与可视化套件 Grafana 9正式发布
- 前端开发者必须掌握的数据可视化技术
- 勾股OA系统的进销存管理模块功能说明
- tinnkphp6使用腾讯地图API获取客户的当前位置(城市,经纬度)
- 12款开源JavaScript 流程图组件推荐