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

Trackback: http://www.cnblogs.com/JustinYoung/articles/740606.html