有没有一种快速的方法可以将表TD(使用CSS或Javascript)转换为TR,目前我有:
A B C D 1 2 3 4
我想翻译成:
A 1 B 2 C 3 D 4
??
您想要将HTML排列成这样:
<tr><td>A</td><td>B</td><td>C</td><td>D</td></tr> <tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
变成这个:
<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>
正确?
您可以使用Javascript来做到这一点,但是,很难在不完全了解站点/ HTML文件的结构的情况下建议一种方法。我会去的。
假设您的<table>代码带有ID(例如:<table id="myTable">您可以像这样在javascript中访问它:
<table>
<table id="myTable">
var myTable = document.getElementById('myTable');
您可以创建一个新表,如下所示:
var newTable = document.createElement('table');
现在,您需要将旧表行转置为新表列:
var maxColumns = 0; // Find the max number of columns for(var r = 0; r < myTable.rows.length; r++) { if(myTable.rows[r].cells.length > maxColumns) { maxColumns = myTable.rows[r].cells.length; } } for(var c = 0; c < maxColumns; c++) { newTable.insertRow(c); for(var r = 0; r < myTable.rows.length; r++) { if(myTable.rows[r].length <= c) { newTable.rows[c].insertCell(r); newTable.rows[c].cells[r] = '-'; } else { newTable.rows[c].insertCell(r); newTable.rows[c].cells[r] = myTable.rows[r].cells[c].innerHTML; } } }
这应该做您需要的。被预先警告:未经测试。留给读者练习这些javascript代码到HTML页面中的练习。如果有人发现我错过的任何错误,如果您向我指出这些错误,或者只是进行编辑以解决问题,我将不胜感激:)