繁體中文当前位置: 首页 > 图文教程 > 网络编程 > Javascript > 在客户端把表格行变成列，列变成行并保持TD的属性不丢失
- Javascript
- javascript实例教程(19) 使用HoTMetal(5)
- javascript实例教程(19) 使用HoTMetal(6)
- javascript实例教程(19) 使用HoTMetal(7)
- javascript实例教程(20) OLE Automation(1)
- javascript实例教程(20) OLE Automation(2)
- javascript实例教程(20) OLE Automation(3)
- javascript实例教程(20) OLE Automation(4)
- javascript实例教程(20) OLE Automation(5)
- javascript实例教程(20) OLE Automation(6)
- javascript实例教程(20) OLE Automation(7)
- 用javascript实现利用FLASH嵌入声音
- javascript版的日期输入控件(6)
- javascript设计网页中的下拉菜单
- javascript设计漫天雪花
- javascript制作浮动的工具条
- javascript制作闪烁的边框
- javascript模拟游戏中的弹出菜单效果
- 在IE中使用javascript
- 利用javascript制作简单动画
- 首页地址添加到收藏夹(javascript)
Javascript 中的 在客户端把表格行变成列，列变成行并保持TD的属性不丢失
出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-08-10 浏览: 173 ::
收藏到网摘: n/a
效果如下：
| C1 | C2 | C3 | C4 onmouseover事件和onmouseout事件，nowrap | C5 | C6 | C7 | C8 | C9 | |
| R1 | |||||||||
| R2 | |||||||||
| R3 | |||||||||
| R4 | R4C4 | R4C5 | |||||||
| R5 | |||||||||
| R6 | |||||||||
| R7 | |||||||||
| R8 | |||||||||
| R9 | |||||||||
| R10 | |||||||||
| R11 | |||||||||
| R12 | |||||||||
| R13 | |||||||||
| R14 | |||||||||
| R15 | |||||||||
| R16 | |||||||||
| R17 | |||||||||
| R18 | |||||||||
| R19 | R19C9 |
代码如下：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>在客户端把表格 行变成列，列变成行</title>
<script language="javascript">
function test(objTab)
{
var tabArray = new Array();
for(var i = 0;i<objTab.rows[0].cells.length;i++)
{
var tmpArray = new Array()
for(var j = 0; j<objTab.rows.length;j++)
{
tmpArray[tmpArray.length] = objTab.rows[j].cells[i].outerHTML
}
tabArray[tabArray.length] = tmpArray;
}
var str = "";
for(var i =0;i<tabArray.length;i++)
{
str += "<tr>" + tabArray[i].join("") + "</tr>"
}
str = "<table width=\"200\" border=\"1\" id=\"tab\">" + str + "</table>";
objTab.outerHTML = str
}
</script>
<style type="text/css">
<!--
.style1 {color: #330099}
-->
</style>
</head>
<body>
<table width="200" border="1" id="tab">
<tr>
<td> </td>
<td bgcolor="#FF0000">C1</td>
<td bgcolor="#00FF66">C2</td>
<td>C3</td>
<td nowrap onMouseOver="this.bgColor='#66FFFF'" onMouseOut="this.bgColor=''">C4 onmouseover事件和onmouseout事件，nowrap</td>
<td>C5</td>
<td>C6</td>
<td>C7</td>
<td>C8</td>
<td>C9</td>
</tr>
<tr>
<td>R1</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td bgcolor="#006666">R2</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td bgcolor="#00CCFF"><span class="style1">R3</span></td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>R4</td>
<td> </td>
<td> </td>
<td> </td>
<td>R4C4</td>
<td>R4C5</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>R5</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>R6</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>R7</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>R8</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>R9</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>R10</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>R11</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>R12</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>R13</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>R14</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>R15</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>R16</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>R17</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>R18</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>R19</td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td>R19C9</td>
</tr>
</table>
<br>
<input type="button" name="Submit" value="按钮" onClick="test(tab)">
</body>
</html>
评论 (0) All
