用JavaScript实现table行列互换
2010-09-14 13:23:35 来源:WEB开发网 闂傚倸鍊搁崐鎼佸磹閹间礁纾归柟闂寸绾惧綊鏌熼梻瀵割槮缁惧墽鎳撻—鍐偓锝庝簻椤掋垺銇勯幇顖毿撻柟渚垮妼椤粓宕卞Δ鈧獮濠勭磽閸屾艾鈧懓顫濋妸鈺佺疅缂佸顑欓崥瀣煕椤愵偅绶氱紓鍐╂礋濮婂宕掑▎鎴М濠电姭鍋撻梺顒€绉甸幆鐐哄箹濞n剙濡肩紒鎰殜閺屸€愁吋鎼粹€茬敖婵炴垶鎸哥粔鐢稿Φ閸曨垰鍐€妞ゆ劦婢€濞岊亪姊虹紒妯诲蔼闁稿海鏁诲濠氭晲婢跺﹤宓嗛梺缁樺姈缁佹挳宕戦幘璇叉嵍妞ゆ挻绋戞禍鐐叏濡厧浜鹃悗姘炬嫹

KeyWord:JavaScript实现table行列互换,行列互换,行列互置,行列转换,行列转化,appendChild,appendChild的用法,appendChild的使用,removeChild,removeChild的用法,removeChild的使用
现行代码只实现了单行table无限列的情况下的互换,无限行无限列table的行列互换,感觉过于复杂(当然,可能是我太过于笨拙了),尝试了一下,无果,加上现行情况已经够用,所以就没有更深入。如果有哪个高人实现了,麻烦讲代码发我一份,不胜感激。
实现原理很简单,就是讲tbody内的行列转换后,再重新加到tbody里面,同时删除原始的元素。
<!doctype html public "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script language="javascript" type="text/javascript">
function Change(){
var myTable;
myTable=document.getElementById("tbltest");
var TDcount=myTable.firstChild.children[0].children.length;
for(i=0;i<TDcount;i++){
//添加转换后的tbody内的子元素
myTable.firstChild.appendChild(creatTR(myTable.firstChild.children[0].children[i].innerHTML))
}
//删除原始的tbody内的子元素
myTable.firstChild.removeChild(myTable.firstChild.children[0]);
}
//根据传进来的内如形成一行
function creatTR(innetHTML){
var newTD = document.createElement("TD");
newTD.innerText=innetHTML;
var newTR= document.createElement("TR");
newTR.appendChild(newTD)
return newTR;
}
</script>
</head>
<body>
<table border="1px" id="tblTest">
<tr>
<td>
11111111</td>
<td>
2222222</td>
</tr>
</table>
<input type="button" value="change" onclick="Change();">
</body>
</html>
Tags:JavaScript 实现 table
编辑录入:爽爽 [复制链接] [打 印]更多精彩
赞助商链接