table的tr行移
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>table的tr行移</title>
<style>
.my_tab{
text-align: center;
}
</style>
</head>
<body>
<table class="my_tab" style="width: 500px;margin:20px auto;margin-bottom:0;">
<tr class="move">
<th style="width: 10%">
序 号
</th>
<th style="width: 15%">
职位
</th>
<th style="width: 15%">
姓名
</th>
<th style="width: 30%">
顺序
</th>
</tr>
</table>
<table class="my_tab" style="margin:0 auto;width: 500px;">
<tr class="move">
<td class="tab_num" style="width: 10%">
1
</td>
<td style="width: 15%">
个人安保人员
</td>
<td style="width: 15%">
王大锤1
</td>
<td style="width: 30%">
<a class="downarrow" href="#" title="向下移">向下移</a>
<a class="uparrow" href="#" title="向上移">向上移
</a>
</td>
</tr>
<tr class="move">
<td class="tab_num">
2
</td>
<td>
个人秘书
</td>
<td>
王小秘2
</td>
<td>
<a class="downarrow" href="#" title="向下移">向下移</a>
<a class="uparrow" href="#" title="向上移">向上移
</a>
</td>
</tr>
<tr class="move">
<td class="tab_num">
3
</td>
<td>
个人安保人员
</td>
<td>
王大锤3
</td>
<td>
<a class="downarrow" href="#" title="向下移">向下移</a>
<a class="uparrow" href="#" title="向上移">向上移
</a>
</td>
</tr>
<tr class="move">
<td class="tab_num">
4
</td>
<td>
个人秘书
</td>
<td>
王小秘4
</td>
<td>
<a class="downarrow" href="#" title="向下移">向下移</a>
<a class="uparrow" href="#" title="向上移">向上移
</a>
</td>
</tr>
<tr class="move">
<td class="tab_num">
5
</td>
<td>
个人安保人员
</td>
<td>
王大锤5
</td>
<td>
<a class="downarrow" href="#" title="向下移">向下移</a>
<a class="uparrow" href="#" title="向上移">向上移
</a>
</td>
</tr>
</table>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script>
/*
params
t:触发事件的元素
oper:操做方式
*/
$(function() {
function check(t, oper) {
var data_tr = $(t).parent("td").parent("tr"); //获取到触发的tr
if (oper == "MoveUp") { //向上移动
if ($(data_tr).prev().html() == null) { //获取tr的前一个相同等级的元素是否为空
alert("已是最顶部了!");
return;
} {
$(data_tr).insertBefore($(data_tr).prev()); //将自己插入到目标tr的前面
var cur_num = $(data_tr)[0].rowIndex + 2; //获取当前行行号
$(data_tr).find(".tab_num").text(cur_num - 1); //当前行上移后序号变为cur_num-1
$(data_tr).next("tr").find(".tab_num").text(cur_num); //当前行移动前的前一行下移后序号变为cur_num
}
} else {
if ($(data_tr).next().html() == null) {
alert("已是最低部了!");
return;
} {
$(data_tr).insertAfter($(data_tr).next()); //将自己插入到目标tr的后面
var cur_num = $(data_tr)[0].rowIndex; //获取当前行行号
$(data_tr).find(".tab_num").text(cur_num + 1); //当前行下移后序号变为cur_num
$(data_tr).prev("tr").find(".tab_num").text(cur_num); //当前行移动前的下一行上移后序号变为cur_num
}
}
}
$(".downarrow").on("click", function() {
check(this, "MoveDown");
})
$(".uparrow").on("click", function() {
check(this, "MoveUp");
})
})
</script>
</body>
</html>
相关文章
- 1. table中设置tr行间距
- 2. jQuery移除tr
- 3. js table 行上移、下移
- 4. table中tr间距的设定
- 5. table tr td 另类的妙用
- 6. table、tr、td表格的行、单元格等属性说明
- 7. antd Table 如何根据某一行的数据控制行tr的样式
- 8. 动态添加table tr td 表格
- 9. Html table、thead、tr、th、td 标签
- 10. body onload()事件和table insertRow()、tr insertCell()
- 更多相关文章...
- • PHP 7 移除的扩展 - PHP 7 新特性
- • PHP 7 移除的 SAPI - PHP 7 新特性
- • 漫谈MySQL的锁机制
- • 互联网组织的未来：剖析GitHub员工的任性之源
相关标签/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. 外部其他进程嵌入到qt FindWindow获得窗口句柄 报错无法链接的外部符号 [email protected] 无法被([email protected]@[email protected]@@引用
- 2. UVa 11524 - InCircle
- 3. The Monocycle（bfs）
- 4. VEC-C滑窗
- 5. 堆排序的应用-TOPK问题
- 6. 实例演示ElasticSearch索引查询term,match,match_phase,query_string之间的区别
- 7. 数学基础知识 集合
- 8. amazeUI 复择框问题解决
- 9. 背包问题理解
- 10. 算数平均-几何平均不等式的证明,从麦克劳林到柯西
欢迎关注本站公众号,获取更多信息
