如何反轉（轉置）HTML表的行和列？

Question

我想轉置HTML表格中的行和列，即行列作爲列，列作爲行。

我能做什麼？

例子：

1 4 7 
2 5 8 
3 6 9 

爲

1 2 3 
4 5 6 
7 8 9 

Answer 1

http://jsfiddle.net/CsgK9/2/

HTML：

<table> 
    <tr> 
     <td>1</td> 
     <td>4</td> 
     <td>7</td> 
    </tr> 
    <tr> 
     <td>2</td> 
     <td>5</td> 
     <td>8</td> 
    </tr> 
    <tr> 
     <td>3</td> 
     <td>6</td> 
     <td>9</td> 
    </tr> 
</table> 


<p><a href="#">Do it.</a></p> 

JS：

$("a").click(function(){ 
    $("table").each(function() { 
     var $this = $(this); 
     var newrows = []; 
     $this.find("tr").each(function(){ 
      var i = 0; 
      $(this).find("td").each(function(){ 
       i++; 
       if(newrows[i] === undefined) { newrows[i] = $("<tr></tr>"); } 
       newrows[i].append($(this)); 
      }); 
     }); 
     $this.find("tr").remove(); 
     $.each(newrows, function(){ 
      $this.append(this); 
     }); 
    }); 

    return false; 
}); 

Answer 2

你想這樣做，在什麼語言？我認爲JavaScript，正如你所說的jQuery。 （jQuery不是語言，它是一種語言的庫）

您需要找到一種方法來將表格表示爲數據結構。這應該通過OOP來簡化。我建議您獲取列數和行數，並將數據放在一個單一的平面數組中。

您還需要設計一些能夠解析HTML並獲取表格的東西，將其轉換爲結構，從而可以輕鬆完成計算。這可以通過jQuery的方法完成。

然後，你需要找到一個排序函數，排序平面數組。

最後，您需要將數組拆分成適當的列和行並重新渲染HTML。

請參閱！沒那麼難。設計幾乎爲你完成，你需要的只是實現它。 （也許我不應該爲你做這麼多工作..）

Answer 3

這應該任意的HTML工作：

function swap(cells, x, y){ 
    if(x != y){  
    var $cell1 = cells[y][x]; 
    var $cell2 = cells[x][y]; 
    $cell1.replaceWith($cell2.clone()); 
    $cell2.replaceWith($cell1.clone()); 
    } 
} 

var cells = []; 
$('table').find('tr').each(function(){ 
    var row = []; 
    $(this).find('td').each(function(){ 
     row.push($(this));  
    }); 
    cells.push(row); 
}); 

for(var y = 0; y <= cells.length/2; y++){ 
    for(var x = 0; x < cells[y].length; x++){ 
     swap(cells, x, y); 
    } 
} 

工作小提琴：

http://jsfiddle.net/Hskke/1/

Answer 4

有，這是由大衛·布舍爾（使用Flexbox的）一個CSS的解決方案： http://dbushell.com/2016/03/04/css-only-responsive-tables/

而且也有這個CSS的解決方案（使用浮動）

tr { display: block; float: left; } 
th, td { display: block; } 

http://jsfiddle.net/XKnKL/3/

（他們都在這個答案中提到：HTML Table with vertical rows）

Answer 5

我有類似的問題，但我想轉表

$("table.cennik").each(function() { 
 
     var $this = $(this); 
 
     var newrows = []; 
 
     $('#summaryProductName, #pcalPricelistName').remove(); 
 
\t \t $(this).find('th').removeAttr('rowspan').removeAttr('colspan'); 
 
\t \t $this.find('th').eq(1).attr('rowspan','2'); 
 
     $this.find("tr").each(function(){ 
 
      var i = 0; 
 
      $(this).find("td,th").each(function(){ 
 
       i++; 
 
       if(newrows[i] === undefined) { newrows[i] = $("<tr></tr>"); } 
 
       newrows[i].append($(this)); 
 
      }); 
 
     }); 
 
     $this.find("tr").remove(); 
 
     $.each(newrows, function(){ 
 
      $this.append(this); 
 
     }); 
 
    });

td { border: 1px solid #929292;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> 
 
<table id="1_1" class="cennik ui-table" style="float:left; margin-right: 20px;" cellspacing="0"> 
 
<tbody> 
 
    <tr> 
 
    <th rowspan="2">Quantity </th> 
 
    <th colspan="2">Price</th> 
 
    </tr> 
 
    <tr> 
 
    <td id="spCalPricelistName"> First price </td> 
 
    <td id="spCalPricelistName"> Second price </td> 
 
    </tr> 
 
    <tr> 
 
    <td>1 - 2</td> 
 
    <td>15 zł</td> 
 
    <td>20 zł</td> 
 
    </tr> 
 
    <tr> 
 
    <td>3 - 9</td> 
 
    <td>12 zł</td> 
 
    <td>17,50 zł</td> 
 
    </tr> 
 
    <tr> 
 
    <td>10+</td> 
 
    <td>10 zł</td> 
 
    <td>15 zł</td> 
 
    </tr> 
 
    </tbody> 
 
</table>

，這是不工作的，在表格單元格合併單元格和行跨度表。

我試圖刪除這個屬性，仍然沒有線索如何拉細胞「第一價」與行價格