繁體中文当前位置: 首页 > 图文教程 > 网络编程 > Javascript > 在客户端把表格行变成列，列变成行并保持TD的属性不丢失
- Javascript
- javascript IFrame 强制刷新代码
- JQuery 学习笔记 选择器之一
- JQuery 学习笔记 选择器之二
- JQuery 学习笔记 选择器之三
- JQuery 学习笔记 element属性控制
- Prototype 工具函数 学习
- Prototype Selector对象学习
- 用JQuery 实现AJAX加载XML并解析的脚本
- jquery 表单下所有元素的隐藏
- javascript 动态table添加colspan\rowspan 参数的方法
- 利用javascript/jquery对上传文件格式过滤的方法
- javaScript 判断字符串是否为数字的简单方法
- jquery 将disabled的元素置为enabled的三种方法
- javascript 解析后的xml对象的读取方法细解
- IE中radio 或checkbox的checked属性初始状态下不能选中显示问题
- javascript 一个函数对同一元素的多个事件响应
- 对象特征检测法判断浏览器对javascript对象的支持
- javaScript Array（数组）相关方法简述
- js 字符串操作函数
- JavaScript中null与undefined分析
Javascript 中的 在客户端把表格行变成列，列变成行并保持TD的属性不丢失
出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-08-10 浏览: 383 ::
收藏到网摘: 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
