如何反转(转置)HTML 表格的行和列? [英] How to invert (transpose) the rows and columns of an HTML table?
本文介绍了如何反转(转置)HTML 表格的行和列?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我想转置 HTML 表格中的行和列,即将行作为列,将列作为行.
I want to transpose the rows and columns in an HTML table, i.e. Rows as Columns, Columns as Rows.
我可以通过什么方式做到这一点?
In what way I can do it?
示例:
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 表格的行和列?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文