将TD列转换为TR行

Question

有没有一种快速的方法（使用CSS或Javascript）将表格的TD转换为TR，目前我有以下代码：

A B C D
1 2 3 4

and I want to translate to:

A 1
B 2
C 3
D 4

??

- TM.

Answer 1

你想将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页面中留给读者自己练习。如果有人发现我忽略的任何错误，请指出或编辑以修复:)

- Daniel Bingham

---

newTable.rows[c].cells[r] = myTable.rows[r].cells[c].innerHTML; 应该改为 newTable.rows[c].cells[r].innerHTML = myTable.rows[r].cells[c].innerHTML;。 - Natrium

请在结尾处添加document.body.appendChild(newTable);，以便将表格元素添加到DOM中。 - Natrium

Answer 2

以下是经过测试的函数，可以转置表格，并保留您钩子到表格中任何元素（例如：单元格上的单击事件或单元格内容）的任何格式和事件。

function TransposeTable(tableId)
{        
    var tbl = $('#' + tableId);
    var tbody = tbl.find('tbody');
    var oldWidth = tbody.find('tr:first td').length;
    var oldHeight = tbody.find('tr').length;
    var newWidth = oldHeight;
    var newHeight = oldWidth;

    var jqOldCells = tbody.find('td');        

    var newTbody = $("<tbody></tbody>");
    for(var y=0; y<newHeight; y++)
    {
        var newRow = $("<tr></tr>");
        for(var x=0; x<newWidth; x++)
        {
            newRow.append(jqOldCells.eq((oldWidth*x)+y));
        }
        newTbody.append(newRow);
    }

    tbody.replaceWith(newTbody);        
}

注意事项： - 需要 JQuery - 没有在非常大的表格上测试过 - 在具有跨列/行的表格上可能会出错 - 在具有任何组合的 thead/th 的表格上可能会出错

只要您的表格没有跨列单元格并且不使用 thead/th，就应该可以正常工作。

- David

Answer 3

这是一个解决方案，针对移动设备和平板电脑，去掉媒体查询和th绝对位置就可以了！

基于此：

table, thead, tbody, th, td, tr { 
display: block; 
}

http://css-tricks.com/responsive-data-tables/

- clara

Answer 4

也许有人需要：我通过CSS将TR转换为TD（一个只有一列的表格）。 从第二行开始，应用以下代码到TR直到表格结束：

<tr style="float:left;">

同时使用下面的代码，将每3行显示为一行3列：

<tr style="float:left; width:33.33%;"> 

- Intacto