js_网页表格行和列互换效果

NOCO发布于 2010-08-27 分类 Html5

670天前有1个用户阅读过

本文来自我的百度空间博客详情

2007年开始使用的是 hi.baidu.com/udjy
后来百度空间强制升级为轻博客 hi.baidu.com/imnoco
2015年百度关闭了百度空间

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<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>

-- The End --

js_网页表格行和列互换效果

评论