提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

使用jquery写个更改表格行顺序的小功能

jQuery 使用 功能 表格 更改 顺序 写个
2023-06-13 09:15:25 时间
周末写了个更改表格行顺序的小功能，直接贴代码

表格部分如下：
复制代码代码如下:

<tableclass="table"id="test_table">
<thead>
<tr>
<th>时间</th>
<th>详情</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<trcid="7.0.0-2014-04-29_11-02-24_123"class="list_line">
<td>
2014-04-2911:02:24
</td>
<td>
详情
</td>
<td>
<spanclass="move_btnglyphiconglyphicon-arrow-up"move_act="up"></span>
<spanclass="move_btnglyphiconglyphicon-arrow-down"move_act="down"></span>
</td>
</tr>
<trcid="7.0.0-2014-04-29_11-02-24_915"class="list_line">
<td>
2014-04-2810:00:00
</td>
<td>
详情
</td>
<td>
<spanclass="move_btnglyphiconglyphicon-arrow-up"move_act="up"></span>
<spanclass="move_btnglyphiconglyphicon-arrow-down"move_act="down"></span>
</td>
</tr>
</tbody>
</table>

js代码，其中会为要变更的行在变更顺序后加上class=danger
复制代码代码如下:

<scripttype="text/javascript">
$(function(){
$(".move_btn").click(function(){
varmove_act=$(this).attr("move_act");
$("#test_tabletbodytr").removeClass("danger");

if(move_act=="up"){
$(this).parent().parent("tr").addClass("danger")
.prev().before($(this).parent().parent("tr"));
}
elseif(move_act=="down"){
$(this).parent().parent("tr").addClass("danger")
.next().after($(this).parent().parent("tr"));
}
setTimeout("$("#test_tabletbodytr").removeClass("danger");",2000);
});
});
</script>

更改后可以按照每行的唯一标记提交新的顺序

吐槽：喊着加班=狼性的公司都是不适合正常人类生存的公司，把周末加班当成鼓吹的事情&评价员工是否有狼性的标准更是扯淡。

相关文章