javascript Table 中2个列（TD）的交换实现代码_javascript技巧-js教程-PHP中文网

javascript Table 中2个列（TD）的交换实现代码_javascript技巧

WBOY

发布： 2016-05-16 18:55:58

原创

1073 人浏览过

<title> New Document </title> 
<meta name="Generator" content="EditPlus"> 
<meta name="Author" content="majianan"> 
<meta name="Keywords" content=""> 
<meta name="Description" content=""> 
<script type="text/javascript"></script> 
 
 
<table> 
<tr> 
<td id="a">[a]</td> 
<td id="b">[b]</td> 
<td id="c">[c]</td> 
<td id="d">[d]</td> 
<td id="e">[e]</td> 
</tr> 
</table> 
<tr><td><input id="t1" type="text" value="a"></td></tr> 
<tr><td><input id="t2" type="text" value="b"></td></tr> 
<tr><td><input type="button" value="swap" onclick="swap()"></td></tr>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

上面的格式，比较奇怪，我用js稍微改了下，文本框分别是要转换的索引，不能随便输。

function swapNode(node1,node2) 
{ 
var _parent=node1.parentNode; 
var _t1=node1.nextSibling; 
var _t2=node2.nextSibling; 
if(_t1) 
_parent.insertBefore(node2,_t1); 
else 
_parent.appendChild(node2); 
if(_t2) 
_parent.insertBefore(node1,_t2); 
else 
_parent.appendChild(node1); 
}

function swap(){ 
var t1 = document.getElementById("t1").value; 
var t2 = document.getElementById("t2").value; 
swapNode(document.getElementById(t1),document.getElementById(t2)); 
} 
// --></script>

</table> 
<tr><td><input id="t1" type="text" value="a"></td></tr> 
<tr><td><input id="t2" type="text" value="b"></td></tr> 
<tr><td><input type="button" value="swap" onclick="swap()"></td></tr>