<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>dhtml.table.rowColumnExchange.html</title>
<meta name="generator" content="editplus" />
<meta name="author" content="yixianggao@126.com" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<style type="text/css">
table
{
border-collapse: collapse;
}
td
{
border: solid 1px red;
padding: 5px 5px 5px 5px;
}
</style>
</head>
<body>
<input type="button" value="行列变换" id="btnRotate" />
<table id="tbeTest">
<tr>
<td>姓名</td>
<td>年龄</td>
</tr>
<tr>
<td>张三</td>
<td>32</td>
</tr>
<tr>
<td>李四</td>
<td>26</td>
</tr>
<tr>
<td>王五</td>
<td>42</td>
</tr>
<tr>
<td>刘六</td>
<td>21</td>
</tr>
<tr>
<td>孙七</td>
<td>12</td>
</tr>
</table>
</body>
<script type="text/javascript">
document.getElementById("btnRotate").onclick = function() {
var tbe = document.getElementById("tbeTest");
if (tbe.style.display=="")
{
var newTbe = document.createElement("table");
var tr,td,newTr,newTd;
for (var i=0; i<tbe.rows.length; i++)
{
tr = tbe.rows[i];
for (var j=0; j<tr.cells.length; j++)
{
td = tr.cells[j];
if (i==0)
newTr = newTbe.insertRow(j);
else
newTr = newTbe.rows[j];
newTd = newTr.insertCell(i);
newTd.innerHTML = td.innerHTML;
}
}
tbe.style.display = "none";
document.body.insertBefore(newTbe, tbe);
}
};
</script>
</html>