用JavaScript实现table行列互换
2010-09-14 13:23:35 来源：WEB开发网 闂傚倸鍊搁崐鎼佸磹閹间礁纾归柟闂寸绾惧綊鏌熼梻瀵割槮缁惧墽鎳撻—鍐偓锝庝簻椤掋垺銇勯幇顖毿撻柟渚垮妼椤粓宕卞Δ鈧獮濠勭磽閸屾艾鈧懓顫濋妸鈺佺疅缂佸顑欓崥瀣煕椤愵偅绶氱紓鍐╂礋濮婂宕掑▎鎴М濠电姭鍋撻梺顒€绉甸幆鐐哄箹濞ｎ剙濡肩紒鎰殜閺屸€愁吋鎼粹€茬敖婵炴垶鎸哥粔鐢稿Φ閸曨垰鍐€妞ゆ劦婢€濞岊亪姊虹紒妯诲蔼闁稿海鏁诲濠氭晲婢跺﹤宓嗛梺缁樺姈缁佹挳宕戦幘璇叉嵍妞ゆ挻绋戞禍鐐叏濡厧浜鹃悗姘炬嫹
闂傚倸鍊搁崐鎼佸磹閹间礁纾归柟闂寸绾惧綊鏌熼梻瀵割槮缁惧墽鎳撻—鍐偓锝庝簼閹癸綁鏌ｉ鐐搭棞闁靛棙甯掗～婵嬫晲閸涱剙顥氬┑掳鍊楁慨鐑藉磻濞戔懞鍥偨缁嬫寧鐎梺鐟板⒔缁垶宕戦幇鐗堢厵缂備焦锚缁椦囨煃瑜滈崜锕傚矗閸愵煈娼栭柛婵嗗珔瑜斿畷鎯邦槾濞寸姴銈稿铏规嫚閼碱剛顔夐梺鐓庣秺缁犳牠骞冩ィ鍐╁€婚柦妯侯槼閹芥洟姊洪棃娑辨濠碘€虫喘瀹曘垽鎮介崨濞炬嫼闁荤喐鐟ョ€氱兘宕箛娑欑厱闁绘ê纾晶鐢告煏閸℃鈧湱缂撴禒瀣窛濠电姴瀚獮鍫ユ⒑绾懎顥嶉柟娲讳簽濡叉劙寮撮悢鍝勨叞闂傚倸鍊风欢姘缚瑜嶇叅闁靛牆娲犻崑鎾愁潩椤愩垹绁梺缁樹緱閸ｏ綁鐛幒鎳虫棃鍩€椤掑倻涓嶉柨婵嗘缁♀偓闂傚倸鐗婄粙鎴﹀汲濞嗗緷鐟扳堪閸垻鏆梺鍝勭焿缂嶄焦鎱ㄩ埀顒勬煃閹増纭炬繝鈧潏銊х彾闁哄洨鍠撶弧鈧┑顔斤供閸橀箖宕㈤悽鍛娾拺缂備焦锚婵箓鏌涢幘鏉戝摵闁诡喗蓱濞煎繘濡搁妶鍥╃暰闂備礁婀辩划顖滄暜閻愬瓨娅犳繛鎴炴皑绾捐偐绱撴担璐細婵炴彃顕埀顒冾潐濞叉牕鐣烽鍐簷闂備礁鎲￠崝鏇㈠疮閻樿绀堟繝闈涚墛瀹曞弶绻涢幋鐐ㄧ細闁哄棗妫楅埞鎴︽偐鏉堫偄鍘￠梺杞扮劍閻楁粎妲愰幘瀛樺濞寸姴顑呴幗鐢告⒑閸︻厽鍤€婵炲眰鍊濋幃楣冩倻閽樺顔婇梺瑙勬儗閸樹粙宕撻悽鍛娾拺闁荤喐婢橀幃渚€鏌ｉ幒鐐电暤闁诡喗顨婇獮鏍ㄦ媴閸忓瀚藉┑鐐舵彧缁插潡宕曢妶澶婂惞闁逞屽墴濮婃椽骞栭悙娴嬪亾閺嶎厽鍋嬮柣妯垮吹瀹撲線鐓崶銊р姇闁哄懏鎮傞弻銊╂偆閸屾稑顏�
婵犵數濮烽弫鍛婃叏閻戣棄鏋侀柛娑橈攻閸欏繘鏌ｉ幋锝嗩棄闁哄绶氶弻娑樷槈濮楀牊鏁鹃梺鍛婄懃缁绘垿濡甸崟顖氱闁告鍋熸禒鑲╃磽娴ｅ搫顎岄柛銊ョ埣瀵鈽夐姀鐘电杸闂傚倸鐗婄粙鎺楁倶閸儲鍊甸柣鐔哄閸熺偟绱掔拠鎻掓殻濠碉紕鏁诲畷鐔碱敍濮橀硸鍟嬮梺璇查叄濞佳囧箺濠婂牊鍋╁┑鍌氭啞閳锋垹鐥鐐村婵炲吋鍔栫换娑㈡嚑椤掆偓閺嬪孩銇勯銏㈢缂佽鲸甯掕灒闁兼祴鏅滈崵宀勬⒒娓氣偓閳ь剛鍋涢懟顖涙櫠椤旇偐鏆嗛柨婵嗙墕閸斿灚銇勯敂鐣屽弨闁诡噯绻濇俊鑸靛緞鐎ｎ剙甯鹃梻浣稿閸嬪懐鎹㈤崘顔肩；妞ゅ繐鎳愮粻鍓р偓鐟板閸犳洜鑺辨繝姘畾闁绘柨鍚嬮埛鎴︽倵閸︻厼校闁靛棗鍟撮弻銈夊礃閼碱剙鐓熼悗瑙勬礃缁诲牓寮崘顔肩劦妞ゆ帒瀚ч埀顒佹瀹曟﹢顢欓崲澹洦鐓曢柍鈺佸枤濞堟﹢鏌ｉ悢绋垮婵﹥妞介幃鈩冩償閳╁啯鐦ｉ梻浣虹帛閻楁洟濡剁粙璺ㄦ殾闁绘垶岣跨弧鈧梺鎼炲劀閸愩劎銈梻鍌欑窔濞佳勵殽韫囨洘顫曢柡鍥ュ灩閸屻劍銇勮箛鎾跺闁抽攱鍨块弻鐔兼嚃閳轰椒绮堕梺鍛婃⒐椤ㄥ﹪寮婚敓鐘插窛妞ゆ棃鏁慨鍥╃磽娴ｇǹ鈧湱鏁悢濡撳洨鈧潧鎽滅壕濂稿级閸稑濡肩紒妤佺缁绘盯鎮℃惔锝囶啋闂佺硶鏂侀崜婵嬪箯閸涘瓨鐓ラ悗锝呯仛缂嶆姊婚崒姘偓宄懊归崶褜娴栭柕濞炬櫆閸婂潡鏌ㄩ弴鐐测偓鍝ョ不閺屻儲鐓曢柕澶樺枛婢ь噣鏌＄€ｂ晝绐旈柡宀€鍠栧畷婊嗩槾閻㈩垱鐩弻锟犲川椤旇棄鈧劙鏌＄仦璇插闁诡喓鍊濆畷鎺戔槈濮楀棔绱�闂傚倸鍊搁崐鎼佸磹閹间礁纾归柟闂寸绾惧綊鏌熼梻瀵割槮缁惧墽鎳撻—鍐偓锝庝簻椤掋垺銇勯幇顖毿撻柟渚垮妼椤粓宕卞Δ鈧獮濠勭磽閸屾艾鈧懓顫濋妸鈺佺疅缂佸顑欓崥瀣煕椤愵偅绶氱紓鍐╂礋濮婂宕掑▎鎴М濠电姭鍋撻梺顒€绉甸幆鐐哄箹濞ｎ剙濡肩紒鎰殜閺屸€愁吋鎼粹€茬敖婵炴垶鎸哥粔鐢稿Φ閸曨垰鍐€妞ゆ劦婢€濞岊亪姊虹紒妯诲蔼闁稿海鏁诲濠氭晲婢跺﹤宓嗛梺缁樺姈缁佹挳宕戦幘璇叉嵍妞ゆ挻绋戞禍鐐叏濡厧浜鹃悗姘炬嫹 闂傚倸鍊搁崐鎼佸磹閹间礁纾归柟闂寸绾惧綊鏌熼梻瀵割槮缁炬儳缍婇弻锝夊箣閿濆憛鎾绘煕閵堝懎顏柡灞诲€濆畷顐﹀Ψ閿旇姤鐦庡┑鐐差嚟婵潧顫濋妸褎顫曢柟鎹愵嚙绾惧吋绻涢崱妯虹瑨闁告﹫绱曠槐鎾寸瑹閸パ勭彯闂佹悶鍔岄悥鍏间繆閹绢喖绀冩い鏃傚帶缁愭盯姊洪崫鍕垫Ч闁搞劌缍婂畷銏犆洪鍛偓鍨殽閻愯尙浠㈤柛鏃€纰嶉妵鍕晜鐠囪尙浠搁悗瑙勬穿缁绘繈鐛惔銊﹀殟闁靛／鍐ㄥ闂傚倸饪撮崑鍕洪敃鈧叅闁哄秲鍔庢晶锟犳⒒閸屾瑦绁版い鏇嗗應鍋撻崹顐㈡诞鐎规洘绮撻幃銏＄附婢跺绋侀梻浣瑰劤缁绘劕锕㈡潏鈺侇棜闁稿繘妫跨换鍡樸亜閺嶃劎顣查柟顖氱墛閵囧嫰顢曢姀鈶裤垺銇勯鍕殻濠碘€崇埣瀹曞崬螖閳ь剟锝炴惔銊︹拺闁告稑饪撮悞濂告煕閵夋垵鎳庡銊モ攽閻橆喖鐏辨繛澶嬬閻у矂姊虹紒妯荤叆闁告艾顑夐幃锟犲Ψ閳哄倸鈧敻鏌ㄥ┑鍡涱€楅柛妯绘尦閺屾稓鈧綆鍋呯亸鎵磼缂佹ḿ绠撴い顐ｇ箞椤㈡ê鈽夊▎蹇ｄ紪闂備浇宕甸崰鎰垝鎼淬垺娅犳俊銈呭暞閺嗘粓鏌熼悜妯诲暗妞も晜褰冮湁闁绘挸娴烽幗鐘绘煟閹惧瓨绀嬮柡宀€鍠栭獮鍡氼檨闁搞倗鍠栭弻宥夋寠婢舵ɑ鈻堥梺鍝勮嫰缁夊墎妲愰幒鎳崇喖鎳￠妶鍛辈濠碉紕鍋戦崐銈夊磻閸涱垱宕查柛顐犲劚缁犵姵绻濇繝鍌涘櫣闁哄鐗婃穱濠囶敍濠垫劕娈銈呯箰缂嶅﹤顫忔繝姘＜婵炲棙鍩堝Σ顕€姊虹涵鍜佸殝缂佽鲸娲滈崚鎺戔枎閹惧磭顓洪梺鎸庢煥閹碱偅绂嶆總鍛娾拺闁告繂瀚峰Σ褰掓煕閵娧冩灈鐎殿喗鎮傚顕€宕奸悢鍝勫箰闂備礁鎲￠崝褏寰婇懞銉ь洸闁告挆鍛紳婵炶揪缍€濞咃絿鏁☉姘辩＜閻庯綆鍋呯亸鎵磼閸屾稑娴柡浣稿暣瀹曟帒顫濋幉瀣簥濠电姵顔栭崰妤呮晝閳哄懎绀堥柨鏇炲€归崐鐢告煙閹澘袚闁抽攱甯掗湁闁挎繂鎳忛幉鎼佹煥濞戞ḿ肖缂佽鲸甯￠、姘跺川椤撶姳妗撴俊銈囧Х閸嬬偤宕归崹顔炬殾闁割偅娲﹂弫鍡涙煕鐏炵偓鐨戦柕鍫畵濮婅櫣鎷犻幓鎺戞瘣缂傚倸绉村Λ娆戠矉瀹ュ鍐€妞ゆ挾鍋熼崫妤佺箾鐎电ǹ孝妞ゆ垵妫濋幃鈥斥枎閹剧补鎷哄銈嗘尪閸斿酣鎮鹃崡鐑嗙唵鐟滄粓宕归柆宥呂﹂柛鏇ㄥ灠濡﹢鏌涢…鎴濇灀闁稿鎸鹃幉鎾礋椤撴稒鏁靛┑鐘垫暩婵潙煤閿曞倸纾归梺鍨儍娴滄粓鐓崶銊﹀碍妞ゅ繈鍊濋弻娑氣偓锝庡亝瀹曞瞼鈧鍠栭埀顒傚櫏濡俱劌鈹戦悙鎻掓倯闁绘娲熼崺鐐哄箣閿旇棄浜归柣搴℃贡婵挳藟濠靛鈷戠紒瀣劵椤箓鏌涢弬鍧楀弰妤犵偛顦～銏犵暆閳ь剟鎮块埀顒€鈹戦悙鏉戠仸瀹€锝呮健閹潡宕ㄧ€涙ǚ鎷洪梺闈╁瘜閸欌偓婵＄偓鎮傞弻娑㈡偐閹颁焦鐤侀悗娈垮枟閻擄繝鐛弽銊﹀闁革富鍘煎鎶芥⒒娴ｈ櫣甯涙繛鍙夌墵瀹曟劙宕烽娑樹壕婵ḿ鍋撶€氾拷
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
编辑录入：爽爽 [复制链接] [打 印]
中查找“用JavaScript实现table行列互换”更多相关内容
中查找“用JavaScript实现table行列互换”更多相关内容更多精彩
赞助商链接
