テーブルのtd列を動的に上に移動または下に移動します.
4133 ワード
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>JS HTMLDOM </title>
<style type="text/css">
<!--
td { text-align:center;font-size:12px;padding:3px;}
www.111cn.cn
-->
</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>