繁體中文当前位置: 首页 > 图文教程 > 网络编程 > Javascript > 在客户端把表格行变成列，列变成行并保持TD的属性不丢失
- Javascript
- javascript 响应键盘特定按键(只响应数字键)
- javascript indexOf方法、lastIndexOf 方法和substring 方法
- javascript parseInt 函数分析(转)
- javascript Split方法,indexOf方法、lastIndexOf 方法和substring 方法
- JavaScript 面向对象入门精简篇
- JS中==与===操作符的比较
- JavaScript indexOf忽略大小写
- dwr spring的集成实现代码
- DWR Ext 加载数据
- JavaScript 计算当天是本年本月的第几周
- Js 获取当前日期时间及其它操作实现代码
- javascript multibox 全选
- JS array 数组详解
- javascript 对象定义方法 简单易学
- javascript 补零 函数集合
- div scroll始终在最底部的实现代码
- javascript eval()用法
- javascript 打印页面代码
- JAVASCRIPT THIS详解 面向对象
- javascript 页面跳转方法集合
Javascript 中的 在客户端把表格行变成列，列变成行并保持TD的属性不丢失
出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-08-10 浏览: 410 ::
收藏到网摘: 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
