繁體中文当前位置: 首页 > 图文教程 > 网络编程 > Javascript > 在客户端把表格行变成列，列变成行并保持TD的属性不丢失
- Javascript
- javascript下拉框不被选中大类的区别方法
- firefox浏览器下javascript 拖动层效果与原理分析代码
- javascript 常用关键字列表集合
- [原创]后缀就扩展名为js的文件是什么文件
- 初学JS的的小例子 javascript replace高亮替换
- 项目实践之javascript技巧
- 不间断滚动JS打包类，基本可以实现所有的滚动效果，太强了
- javascript数组使用调用方法汇总
- JS的递增/递减运算符和带操作的赋值运算符的等价式
- JavaScript开发时的五个注意事项
- js中将多个语句写成一个语句的两种方法小结
- javascript while语句和do while语句的区别分析
- 带参数的function 的自运行效果代码
- 看了就知道什么是JSON
- js模拟实现Array的sort方法
- JavaScript创建命名空间(namespace)的最简实现
- 文本链接逐个出现的js脚本
- 我见过最全的个人js加解密功能页面
- CLASS_CONFUSION JS混淆 全源码
- javascript轻松控制表格列样式的脚本代码
Javascript 中的 在客户端把表格行变成列，列变成行并保持TD的属性不丢失
出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-08-10 浏览: 450 ::
收藏到网摘: 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
