繁體中文当前位置: 首页 > 图文教程 > 网络编程 > Javascript > 在客户端把表格行变成列，列变成行并保持TD的属性不丢失
- Javascript
- 一个可以兼容IE FF的加为首页与加入收藏实现代码
- javascript(jquery)利用函数修改全局变量的代码
- JQuery 解析多维的Json数据格式
- javascript 按回车键相应按钮提交事件
- 深入认识javascript中的eval函数
- jquery tree 可编辑节点实现代码(jquery一句话节点菜单)
- js window.onload 加载多个函数的方法
- MAC官方菜单纯CSS实现灰色会换色
- CSS Filter背景透明提示
- CSS鼠标悬停菜单 图片交换技术实现
- 纯JS图片批量预加载技术代码
- 实用的层滑开js实现代码
- jQuery get和post 方法传值注意事项
- JQuery打造PHP的AJAX表单提交实例
- Jquery AJAX 框架的使用方法
- 基于JQuery框架的AJAX实例代码
- jquery ajax 检测用户注册时用户名是否存在
- javascript 限制输入脚本大全
- JavaScript window.setTimeout() 的详细用法
- JavaScript 表格高亮类的应用[高级]
Javascript 中的 在客户端把表格行变成列，列变成行并保持TD的属性不丢失
出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-08-10 浏览: 119 ::
收藏到网摘: 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
