用JavaScript实现table行列互换
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>...</html><html xmlns="http://www.w3.org/1999/xhtml">
<head>...</head><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>...</body><body>
<table border="1px" id="tblTest">
<tr>
<td>
11111111</td>
<td>
2222222</td>
</tr>
</table>
<input type="button" value="change" onclick="Change();">
</body>
</html>
现行代码只实现了单行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>...</html><html xmlns="http://www.w3.org/1999/xhtml"> <head>...</head><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>...</body><body> <table border="1px" id="tblTest"> <tr> <td> 11111111</td> <td> 2222222</td> </tr> </table> <input type="button" value="change" onclick="Change();"> </body> </html>
[本日志由 ui163 于 2007-10-1 16:03:59 编辑]
上一篇:关于DOM事件模型的两件事
下一篇:控制电脑关机或者重新启动的JS代码
文章来自:设计学院
收藏到网摘:
收藏到QQ书签
Tags:
上一篇:关于DOM事件模型的两件事下一篇:控制电脑关机或者重新启动的JS代码
文章来自:设计学院收藏到网摘:
收藏到QQ书签
Tags:
