Rumah >hujung hadapan web >tutorial js >javascript Table 中2个列（TD）的交换实现代码_javascript技巧

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

WBOYasal: 2016-05-16 18:55:581088semak imbas

<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>

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：javascript 模拟select下拉列表特效_表单特效Artikel seterusnya：检测是否已安装 .NET Framework 3.5的js脚本_javascript技巧

Artikel berkaitan

Lihat lagi