表格的行列转换

最新推荐文章于 2024-06-24 22:36:42 发布

时光之里

最新推荐文章于 2024-06-24 22:36:42 发布

阅读量2.5k

点赞数

分类专栏： css 文章标签： js实现表格的行列转换

本文链接：https://blog.csdn.net/m_review/article/details/80051338

版权

css 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>js_网页表格行和列互换效果</title>

<style type="text/css">
table{
border:1px solid #888;
border-collapse:collapse;
color:#f00;}
td{
padding:5px;}
</style>
</head>
<body>
<script type="text/javascript">
//行与列转换
//JS行列转换让我想起了excel的行列转换！
function convertable()
{
var r, re;
var s = table_conver.outerHTML;
re = /<table(.[^>]*)>/i;
r = s.match(re)[0].replace(" id="," oldid=");
var tablehtml=r
for(var i=0;i<table_conver.rows[0].cells.length;i++)
{
   tablehtml+="<tr>"
   for (var k=0;k<table_conver.rows.length;k++)
   {
    tablehtml+=table_conver.rows[k].cells[i].outerHTML
   }
   tablehtml+="</tr>"
}
tablehtml+="</table>"
newtable.innerHTML = tablehtml;
//下面这3句是临时想的，比较简单，实现的过程很顺利。hi.baidu.com/udjy
//下面这一句是让JS执行时隐藏原来的表格内容，达到新表格在原来的表格位置刷出来的效果。
document.getElementById("table_conver").style.display = "none";
//下面这两句实现：按下"转换"时改变为"还原"，同时让按钮的超链接更换为重新加载网页的JS，达到还原的目的，其他方法类似。
document.getElementById("conver_button").innerHTML = "还原";
document.getElementById("conver_button").href = "javascript:window.location.reload()"
}
//-->
</script>


<a id="conver_button" href="javascript:convertable()">转换</a>


<table border="1" id="table_conver">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>

<tr>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>

<tr>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
</tr>

</table>

<div id="newtable"></div>
</body>
</html>

时光之里

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
2
评论
表格的行列转换

&lt;html&gt;&lt;head&gt;&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt;&lt;title&gt;js_网页表格行和列互换效果&lt;/title&gt;&lt;style type="text/css"&gt;table
复制链接

扫一扫

专栏目录