行变成列,列变成行_层和布局特效

模板酷站
  •       4/5
  •       1
  •       2
  •       3
  •       4
  •       5
查看演示效果

      织梦DedeCMS视频教程买空间 租服务器 选网硕互联! 无忧站长工具,百度权重一键全查!

      行变成列,列变成行,您可以先修改部分代码再运行.

      <html> <head> <meta http-equiv="Content-Type" mrc="text/html; charset=gb2312"> <META NAME="Description" CONTENT="模板无忧www.mb5u.com"> <title>行变成列,列变成行 模板无忧www.mb5u.com</title> </head> <body> <SCRIPT LANGUAGE="JavaScript"> <!-- function convertable() { var r, re; var s = haiwa.outerHTML; re = /<table(.[^>]*)>/i; r = s.match(re)[0].replace(" id="," oldid="); var tablehtml=r for(var i=0;i<haiwa.rows[0].cells.length;i++) { tablehtml+="<tr>" for (var k=0;k<haiwa.rows.length;k++) { tablehtml+=haiwa.rows[k].cells[i].outerHTML } tablehtml+="</tr>" } tablehtml+="</table>" mynewtablezone.innerHTML = tablehtml } //--> </SCRIPT> <button onclick=convertable();>换换</button> <table border="1" cellpadding="0" cellspacing="0" width="600" height="120" id=haiwa> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> <td>5</td> <td>6</td> </tr> <tr> <td>11</td> <td bgcolor="#999999">21</td> <td>31</td> <td>41</td> <td>51</td> <td>61</td> </tr> <tr> <td>12</td> <td><font color="#FF0000">22</font></td> <td>32</td> <td>42</td> <td bgcolor="#FFCC66">52</td> <td>62</td> </tr> <tr> <td>13</td> <td>23</td> <td background="http://expert.csdn.net/images/csdn.gif">33</td> <td>43</td> <td><b>53</b></td> <td>63</td> </tr> <tr> <td>14</td> <td>24</td> <td>34</td> <td>44</td> <td>54</td> <td>64</td> </tr> </table> <br> <div id="mynewtablezone"></div> </body> </html>