翻转表格

最新推荐文章于 2022-10-16 12:17:56 发布

嘿是我呀

最新推荐文章于 2022-10-16 12:17:56 发布

阅读量152

点赞数

分类专栏：笔记

本文链接：https://blog.csdn.net/weixin_42998230/article/details/108145201

版权

笔记专栏收录该内容

8 篇文章 0 订阅

订阅专栏

<!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>

在这里插入图片描述

嘿是我呀

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
翻转表格

<!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"
复制链接

扫一扫

专栏目录