?? 9.5.9.html
字號:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Table test</title>
<style type="text/css">
<!--
td { text-align:center;font-size:12px;padding:3px;}
-->
</style>
</head>
<body>
<table id="table1" bordercolor="#000000" width="200" border="1">
<tbody>
<tr>
<td width="25%">1</td>
<td width="25%">11</td>
<!--使用javascript:void(0)是為了能夠傳遞this參數到事件處理程序-->
<td width="25%"><a href="javascript:void(0)" onclick="moveUp(this)">上移</a></td>
<td width="25%"><a href="javascript:void(0)" onclick="moveDown(this)">下移</a></td>
</tr>
<tr>
<td>2</td>
<td>22</td>
<td><a href="javascript:void(0)" onclick="moveUp(this)">上移</a></td>
<td><a href="javascript:void(0)" onclick="moveDown(this)">下移</a></td>
</tr>
<tr>
<td>3</td>
<td>33</td>
<td><a href="javascript:void(0)" onclick="moveUp(this)">上移</a></td>
<td><a href="javascript:void(0)" onclick="moveDown(this)">下移</a></td>
</tr>
<tr>
<td>4</td>
<td>44</td>
<td><a href="javascript:void(0)" onclick="moveUp(this)">上移</a></td>
<td><a href="javascript:void(0)" onclick="moveDown(this)">下移</a></td>
</tr>
<tr>
<td>5</td>
<td>55</td>
<td><a href="javascript:void(0)" onclick="moveUp(this)">上移</a></td>
<td><a href="javascript:void(0)" onclick="moveDown(this)">下移</a></td>
</tr>
</tbody>
</table>
</body>
</html>
<script language="JavaScript" type="text/javascript">
<!--
function cleanWhitespace(element) {
//遍歷element的子結點
for (var i = 0; i < element.childNodes.length; i++) {
var node = element.childNodes[i];
//判斷是否是空白文本結點，如果是，則刪除該結點
if (node.nodeType == 3 && !/\S/.test(node.nodeValue))
node.parentNode.removeChild(node);
}
}
//獲得表格對象
var _table=document.getElementById("table1");
cleanWhitespace(_table);
//使表格行上移，接收參數為鏈接對象
function moveUp(_a){
//通過鏈接對象獲取表格行的引用
var _row=_a.parentNode.parentNode;
//如果不是第一行，則與上一行交換順序
if(_row.previousSibling)swapNode(_row,_row.previousSibling);
}
//使表格行下移，接收參數為鏈接對象
function moveDown(_a){
//通過鏈接對象獲取表格行的引用
var _row=_a.parentNode.parentNode;
//如果不是最后一行，則與下一行交換順序
if(_row.nextSibling)swapNode(_row,_row.nextSibling);
}
//定義通用的函數交換兩個結點的位置
function swapNode(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);
}
//-->
</script>
?? 快捷鍵說明
復制代碼
Ctrl + C
搜索代碼
Ctrl + F
全屏模式
F11
切換主題
Ctrl + Shift + D
顯示快捷鍵
?
增大字號
Ctrl + =
減小字號
Ctrl + -