js旋转90度表格
js旋转90度表格
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<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 width="100%" cellspacing="0" cellpadding="0" id="tbeTest">
<tr>
<td>姓名</td>
<td>年龄</td>
<td>止境</td>
<td>可耕地</td>
</tr>
<tr>
<td>张三</td>
<td>1</td>
<td>a</td>
<td>5</td>
</tr>
<tr>
<td>李四</td>
<td>2</td>
<td>b</td>
<td>6</td>
</tr>
<tr>
<td>王五</td>
<td>3</td>
<td>c</td>
<td>7</td>
</tr>
<tr>
<td>刘六</td>
<td>4</td>
<td>d</td>
<td>8</td>
</tr>
</table>
</body>
<script type="text/javascript">
<!--
$ = document.getElementById;
$("btnRotate").onclick = function() {
var tbe = $("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>
只支持IE! 不支持FF
关键词: js旋转,javascript 编辑时间: 2014-03-12 9:49:12
1
高兴0
支持2
搞笑0
不解0
谎言0
枪稿0
震惊0
无奈0
无聊0
反对0
愤怒
- 暂无评论
网友评论