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員工的任性之源
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
