如何反转（转置）HTML表格的行和列？
我想转置HTML表格中的行和列，即行作为列，列作为行。
我能以什么方式做到这一点？
例如：
1 4 7 2 5 8 3 6 9 如
1 2 3 4 5 6 7 8 9
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; });
这应该适用于任意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 ); } }
工作小提琴：
David Bushell提供了一个CSS解决scheme（使用flexbox）： http ://dbushell.com/2016/03/04/css-only-responsive-tables/
还有这个CSS解决scheme（使用浮点数）
tr { display: block; float: left; } th, td { display: block; }
（他们都在这个答案中提到： 垂直行的HTML表 ）
你想用什么语言来做？ 我认为JavaScript，正如你所说的jQuery。 （jQuery不是一种语言，它是一种语言的库）
您需要find一种将表格表示为数据结构的方法。 这应该通过OOP来简化。 我build议你得到列数和行数，并把数据放在一个单一的平面数组中。
您还需要devise一些能够parsingHTML并获取表格的东西，将其转换为您的结构，从而可以轻松完成计算。 这可以通过jQuery的方法完成。
然后你需要find一个sorting函数来排列平面数组。
最后，你需要将数组拆分成合适的列和行，然后重新渲染HTML。
看到！ 没那么难 devise几乎为你完成，你所需要的只是实现它。 （也许我不应该为你做这么多工作..）
我有类似的问题，但我想转置表
$("table.cennik").each(function() { var $this = $(this); var newrows = []; $('#summaryProductName, #pcalPricelistName').remove(); $(this).find('th').removeAttr('rowspan').removeAttr('colspan'); $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>
