js旋转90度表格

【Javascript】

下载

新闻

文章

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>

<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];