js旋转90度表格

稿件来源: 互联网   撰稿作者: 匿名   发表日期: 2009-04-28   阅读次数: 453   查看权限: 游客查看

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

    愤怒
33.33%(1)
66.67%(2)
共有0 条评论 发言请遵守【相关规定

网友评论

会员头像
发 表同步腾讯微博    验证码:  点击更新请先登陆
  • 暂无评论
关闭模块文章图片 article Pictrue
  • 我的妈妈爸爸
  • 基于koa2+mysql+vue2.0+Element阳光内容管理系统
  • 代码覆盖率工具 Istanbul 入门教程
  • 全栈工程师的武器——MEAN
  • 9款超炫的 CSS3 复选框(Checkbox)
  • 微信开发在线翻译功能
  • CSS3那些不为人知的高级属性
  • 给easyui的datebox添加清空事件
  • flash写字效果
  • kendoUI系列教程之DropDownList下拉菜单
  • kendoUI系列教程之datetimepicker日期时间选择
  • kendoUI系列教程之datepicker日期选择
  • kendoUI系列教程之combobox下拉列表框
  • kendoUI系列教程之colorpicker
  • kendoUI系列教程之calendar日历表
  • kendoUI系列教程之autocomplete自动补齐