旋轉臺90度

我有一個表，看起來是這樣的：旋轉臺90度

<table><tbody> 
    <tr><td>a</td><td>1</td></tr> 
    <tr><td>b</td><td>2</td></tr> 
    <tr><td>c</td><td>3</td></tr> 
    <tr><td>d</td><td>4</td></tr> 
    <tr><td>e</td><td>5</td></tr> 
    <tr><td>f</td><td>6</td></tr> 
    <tr><td>g</td><td>7</td></tr> 
</tbody></table>

我需要它去是這樣的：

<table><tbody> 
    <tr> 
     <td>a</td><td>b</td><td>c</td><td>d</td> 
     <td>e</td><td>f</td><td>g</td> 
    </tr> 
    <tr> 
     <td>1</td><td>2</td><td>3</td><td>4</td> 
     <td>5</td><td>6</td><td>7</td> 
    </tr> 
</tbody></table>

example

I'm thinking something like this should work, but I'm kinda lost, how would I go about this: Here's what I started

我對Javascript，jQuery甚至CSS都是開放的。

來源

2011-06-29 qwertymk

？ – rrapuya

@rrapuya：是的。 – qwertymk

這到底是什麼？它會始終是2列到2列還是你需要它比這更具動態？ – tjameson

只要行都具有相同數量的單元格，這將交換任意大小的行和列tbody，。

<!doctype html> 
<html lang= "en"> 
<head> 
<meta charset= "utf-8"> 
<title> Small Test Page</title> 
</head> 
<body> 
<script> 
function tableSwap(){ 
    var t= document.getElementsByTagName('tbody')[0], 
    r= t.getElementsByTagName('tr'), 
    cols= r.length, rows= r[0].getElementsByTagName('td').length, 
    cell, next, tem, i= 0, tbod= document.createElement('tbody'); 

    while(i<rows){ 
     cell= 0; 
     tem= document.createElement('tr'); 
     while(cell<cols){ 
      next= r[cell++].getElementsByTagName('td')[0]; 
      tem.appendChild(next); 
     } 
     tbod.appendChild(tem); 
     ++i; 
    } 
    t.parentNode.replaceChild(tbod, t); 
} 
</script> 
<h1> Small Test Page</h1> 
<p> <button type= "button" id= "tableSwapBtn" onclick= "tableSwap()"> 
Swap rows and columns</button> </p> 
<table style="width:300px;border:1px" rules="all"> 
<tbody> 
<tr> <td> a</td> <td> 1</td> </tr> 
<tr> <td> b</td> <td> 2</td> </tr> 
<tr> <td> c</td> <td> 3</td> </tr> 
<tr> <td> d</td> <td> 4</td> </tr> 
<tr> <td> e</td> <td> 5</td> </tr> 
<tr> <td> f</td> <td> 6</td> </tr> 
<tr> <td> g</td> <td> 7</td> </tr> 
</tbody> 
</table> 
</body> 
</html>

來源

2011-06-29 04:32:16 kennebec

這裏是我的解決方案： http://jsfiddle.net/mtrwk/19/

$('table').each(function() { 
    $(this).after("<table><tbody></tbody></table>"); 
    var newTable = $(this).next("table").children("tbody"); 
    $(this).children("tbody").children("tr").each(function(rIndex, rItem){ 
     $(this).children("td").each(function(dIndex, dItem){ 
      if(newTable.children("tr:eq("+dIndex+")").html() == null){ 
       newTable.append("<tr></tr>"); 
      } 
      newTable.children("tr:eq("+dIndex+")").append($(this)[0].outerHTML); 
     }); 
    }); 
});

來源

2014-06-24 02:54:32 Dubbo

我有完成這個任務jquery的類。這個類還支持表中的rowspan和colspan。

用法非常簡單：

$('#newtable').tableflip($('#sourcetable'));

這裏是類和樣本使用的代碼：要處理現有的表https://jsfiddle.net/adyhu78/9b1q4ys0/

來源

2016-06-17 09:00:49

回答

相關問題