<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>table row and column conversion
Guess you like
Origin http://43.154.161.224:23101/article/api/json?id=324731023&siteId=291194637
Recommended
Ranking