JS控制HTML表格行上下移動
阿新 • • 發佈：2019-01-16
[b]補充一下：[/b]重新調整了CSS和JS的瀏覽器相容，希望大家多多指教，ThankYou！
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"/>
<title>Table test</title>
<style type="text/css">
table {
width: 300px;
border: 1px solid black;
}
.table2 {
width: 300px;
border: 0px;
}
td {
border: 1px solid black;
text-align: center;
font-size: 12pt;
padding: 3px;
}
.td2 {
border: 0px;
}
.alt {
background: #BEC5BE;
}
</style>
<script language="JavaScript" type="text/javascript">
window.onload = function() {
var _table = document.getElementById("table1");
cleanWhitespace(_table);
}
cleanWhitespace = function(element_obj) {
//遍歷element的子結點
for (var i = 0; i < element_obj.childNodes.length; i++) {
var node = element_obj.childNodes[i];
//判斷是否是空白文字結點，如果是，則刪除該結點
if (node.nodeType == 3 && !/\S/.test(node.nodeValue))
node.parentNode.removeChild(node);
}
}
//使表格行上移，接收引數為連結物件
moveUp = function() {
//獲得表格物件
var _table = document.getElementById("table1");
var _row = "";
for (var i = 0; i < _table.rows.length; i++) {
if (_table.rows[i].className == "alt")
_row = _table.rows[i];
}
//如果不是第一行，則與上一行交換順序
if (_row.previousSibling) {
var last_row = _row.previousSibling;
while (last_row.nodeType != 1) {
last_row = last_row.previousSibling;
}
swapNode(_row,last_row);
}
}
//使表格行下移，接收引數為連結物件
moveDown = function() {
//獲得表格物件
var _table = document.getElementById("table1");
var _row = "";
for (var i = 0; i < _table.rows.length; i++) {
if (_table.rows[i].className == "alt")
_row = _table.rows[i];
}
//如果不是最後一行，則與下一行交換順序
if (_row.nextSibling) {
var next_row = _row.nextSibling;
while (next_row.nodeType != 1) {
next_row = next_row.nextSibling;
}
swapNode(_row,next_row);
}
}
//定義通用的函式交換兩個結點的位置
swapNode = function(node1,node2) {
//獲取父結點
var _parent = node1.parentNode;
//獲取兩個結點的相對位置
var _t1 = node1.nextSibling;
var _t2 = node2.nextSibling;
//將node2插入到原來node1的位置
if (_t1) _parent.insertBefore(node2,_t1);
else _parent.appendChild(node2);
//將node1插入到原來node2的位置
if (_t2) _parent.insertBefore(node1,_t2);
else _parent.appendChild(node1);
}
work_over = function(obj) {
obj.style.backgroundColor='#BEC5BE';
}
work_out = function(obj) {
obj.style.backgroundColor='';
}
work_click = function(obj) {
//獲得表格物件
var t_obj = document.getElementById("table1");
//遍歷所有表格物件的行
for (var i = 0; i < t_obj.rows.length; i++) {
//將行的樣式清空
t_obj.rows[i].className = "";
}
obj.className = "alt";
}
work_updateSort = function() {
//獲得表格物件
var t_obj = document.getElementById("table1");
//獲得表格物件陣列
var row_length = t_obj.rows.length;
var s_num = new Array(row_length);
//遍歷所有表格物件的行
for (var i = 0; i < row_length; i++) {
s_num[i] = t_obj.rows[i].id;
}
}
</script>
</head>
<body>
<table id="table1">
<tr id="1" onclick="work_click(this);" onmouseover="work_over(this);" onmouseout="work_out(this);">
<td width="25%">1</td>
<td width="25%">11</td>
<td width="25%">欄目</td>
<td width="25%">欄目</td>
</tr>
<tr id="2" onclick="work_click(this);" onmouseover="work_over(this);" onmouseout="work_out(this);">
<td>2</td>
<td>22</td>
<td>欄目</td>
<td>欄目</td>
</tr>
<tr id="3" onclick="work_click(this);" onmouseover="work_over(this);" onmouseout="work_out(this);">
<td>3</td>
<td>33</td>
<td>欄目</td>
<td>欄目</td>
</tr>
<tr id="4" onclick="work_click(this);" onmouseover="work_over(this);" onmouseout="work_out(this);">
<td>4</td>
<td>44</td>
<td>欄目</td>
<td>欄目</td>
</tr>
<tr id="5" onclick="work_click(this);" onmouseover="work_over(this);" onmouseout="work_out(this);">
<td>5</td>
<td>55</td>
<td>欄目</td>
<td>欄目</td>
</tr>
</table>
<form id="changeform" name="changeform" method="post">
<table id="table2" class = "table2">
<tr>
<td class = "td2">
<input name="button" type="button" class="" onclick="moveUp();" value="上移"/>
<input name="button" type="button" class="" onclick="moveDown();" value="下移"/>
<input name="Submit" type="button" class="" onClick="work_updateSort();" value="儲存修改"/>
</td>
</tr>
</table>
</form>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312"/>
<title>Table test</title>
<style type="text/css">
table {
width: 300px;
border: 1px solid black;
}
.table2 {
width: 300px;
border: 0px;
}
td {
border: 1px solid black;
text-align: center;
font-size: 12pt;
padding: 3px;
}
.td2 {
border: 0px;
}
.alt {
background: #BEC5BE;
}
</style>
<script language="JavaScript" type="text/javascript">
window.onload = function() {
var _table = document.getElementById("table1");
cleanWhitespace(_table);
}
cleanWhitespace = function(element_obj) {
//遍歷element的子結點
for (var i = 0; i < element_obj.childNodes.length; i++) {
var node = element_obj.childNodes[i];
//判斷是否是空白文字結點，如果是，則刪除該結點
if (node.nodeType == 3 && !/\S/.test(node.nodeValue))
node.parentNode.removeChild(node);
}
}
//使表格行上移，接收引數為連結物件
moveUp = function() {
//獲得表格物件
var _table = document.getElementById("table1");
var _row = "";
for (var i = 0; i < _table.rows.length; i++) {
if (_table.rows[i].className == "alt")
_row = _table.rows[i];
}
//如果不是第一行，則與上一行交換順序
if (_row.previousSibling) {
var last_row = _row.previousSibling;
while (last_row.nodeType != 1) {
last_row = last_row.previousSibling;
}
swapNode(_row,last_row);
}
}
//使表格行下移，接收引數為連結物件
moveDown = function() {
//獲得表格物件
var _table = document.getElementById("table1");
var _row = "";
for (var i = 0; i < _table.rows.length; i++) {
if (_table.rows[i].className == "alt")
_row = _table.rows[i];
}
//如果不是最後一行，則與下一行交換順序
if (_row.nextSibling) {
var next_row = _row.nextSibling;
while (next_row.nodeType != 1) {
next_row = next_row.nextSibling;
}
swapNode(_row,next_row);
}
}
//定義通用的函式交換兩個結點的位置
swapNode = function(node1,node2) {
//獲取父結點
var _parent = node1.parentNode;
//獲取兩個結點的相對位置
var _t1 = node1.nextSibling;
var _t2 = node2.nextSibling;
//將node2插入到原來node1的位置
if (_t1) _parent.insertBefore(node2,_t1);
else _parent.appendChild(node2);
//將node1插入到原來node2的位置
if (_t2) _parent.insertBefore(node1,_t2);
else _parent.appendChild(node1);
}
work_over = function(obj) {
obj.style.backgroundColor='#BEC5BE';
}
work_out = function(obj) {
obj.style.backgroundColor='';
}
work_click = function(obj) {
//獲得表格物件
var t_obj = document.getElementById("table1");
//遍歷所有表格物件的行
for (var i = 0; i < t_obj.rows.length; i++) {
//將行的樣式清空
t_obj.rows[i].className = "";
}
obj.className = "alt";
}
work_updateSort = function() {
//獲得表格物件
var t_obj = document.getElementById("table1");
//獲得表格物件陣列
var row_length = t_obj.rows.length;
var s_num = new Array(row_length);
//遍歷所有表格物件的行
for (var i = 0; i < row_length; i++) {
s_num[i] = t_obj.rows[i].id;
}
}
</script>
</head>
<body>
<table id="table1">
<tr id="1" onclick="work_click(this);" onmouseover="work_over(this);" onmouseout="work_out(this);">
<td width="25%">1</td>
<td width="25%">11</td>
<td width="25%">欄目</td>
<td width="25%">欄目</td>
</tr>
<tr id="2" onclick="work_click(this);" onmouseover="work_over(this);" onmouseout="work_out(this);">
<td>2</td>
<td>22</td>
<td>欄目</td>
<td>欄目</td>
</tr>
<tr id="3" onclick="work_click(this);" onmouseover="work_over(this);" onmouseout="work_out(this);">
<td>3</td>
<td>33</td>
<td>欄目</td>
<td>欄目</td>
</tr>
<tr id="4" onclick="work_click(this);" onmouseover="work_over(this);" onmouseout="work_out(this);">
<td>4</td>
<td>44</td>
<td>欄目</td>
<td>欄目</td>
</tr>
<tr id="5" onclick="work_click(this);" onmouseover="work_over(this);" onmouseout="work_out(this);">
<td>5</td>
<td>55</td>
<td>欄目</td>
<td>欄目</td>
</tr>
</table>
<form id="changeform" name="changeform" method="post">
<table id="table2" class = "table2">
<tr>
<td class = "td2">
<input name="button" type="button" class="" onclick="moveUp();" value="上移"/>
<input name="button" type="button" class="" onclick="moveDown();" value="下移"/>
<input name="Submit" type="button" class="" onClick="work_updateSort();" value="儲存修改"/>
</td>
</tr>
</table>
</form>
</body>
</html>