将TD列转换为TR行

  • Z时代
  • 2024-01-10
  • 分类：问答

有没有一种快速的方法可以将表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中访问它：

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页面中的练习。如果有人发现我错过的任何错误，如果您向我指出这些错误，或者只是进行编辑以解决问题，我将不胜感激：)

以上是 将TD列转换为TR行 的全部内容， 来源链接： utcz.com/qa/407293.html

回到顶部