Javascript 如何反转（转置）HTML 表格的行和列？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6297591/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to invert (transpose) the rows and columns of an HTML table?
提问by Reddy
I want to transpose the rows and columns in an HTML table, i.e. Rows as Columns, Columns as Rows.
我想转置 HTML 表中的行和列，即行作为列，列作为行。
In what way I can do it?
我可以通过什么方式做到这一点？
Example :
例子 ：
1 4 7
2 5 8
3 6 9
as
作为
1 2 3
4 5 6
7 8 9
回答by svinto
html:
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:
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;
});
回答by rosell.dk
There is this a CSS solution by David Bushell (using flexbox): http://dbushell.com/2016/03/04/css-only-responsive-tables/
David Bushell 有一个 CSS 解决方案（使用 flexbox）：http://dbushell.com/2016/03/04/css-only-responsive-tables/
And there is also this CSS solution (using float)
还有这个 CSS 解决方案（使用浮动）
tr { display: block; float: left; }
th, td { display: block; }
(they are both mentioned in this answer: HTML Table with vertical rows)
（在这个答案中都提到了它们：HTML Table with vertical rows）
回答by Stefan Kendall
This should work for arbitrary html:
这应该适用于任意 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 );
}
}
Working fiddle:
工作小提琴：
回答by Pwnna
What language do you want to do it in? I assume JavaScript, as you said jQuery. (jQuery is not a language, it's library to a language)
你想用什么语言来做？我假设 JavaScript，正如你所说的 jQuery。（jQuery 不是一种语言，它是一种语言的库）
You need to find a way to represent the table as a data structure. This should be done via OOP for simplicity. I recommend you to get the number of columns and rows and put the data in 1 single, flat array.
您需要找到一种将表表示为数据结构的方法。为简单起见，这应该通过 OOP 完成。我建议您获取列数和行数，并将数据放入 1 个单一的平面数组中。
You also need to design something that will parses through the HTML and gets the table, converting it to your structure, allowing computations to be done easily. This can be done via jQuery's method.
您还需要设计一些能够解析 HTML 并获取表格的内容，将其转换为您的结构，从而轻松完成计算。这可以通过 jQuery 的方法来完成。
Then you need to find a sort function that sorts the flat array.
然后你需要找到一个排序函数来对平面数组进行排序。
Lastly, you need to break up the the array into the appropriate columns and rows and rerender the HTML.
最后，您需要将数组分解为适当的列和行并重新呈现 HTML。
See! Not that difficult. Designing is pretty much done for you, all you need is to implement it. (Maybe i shouldn't do so much work for you..)
看！没那么难。设计已经为您完成了，您所需要的只是实现它。（也许我不应该为你做那么多工作..）
