Question

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

A B C D
1 2 3 4

我想翻译成：

A 1
B 2
C 3
D 4

...

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页面留给读者练习。如果有人发现我错过的任何错误，如果你指出它们或者只是编辑修复我会感到欣慰：）

Answer 2

这是一个经过测试的函数，它将转置一个表，它将保留你挂钩到表中任何元素的任何格式/事件（即：onclicks on cell或cell contents）

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，就应该好了。

Answer 3

这是一个解决方案，在这种情况下，这适用于手机和平板电脑，删除媒体查询和绝对的位置，你拥有它！

基于此：

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

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

Answer 4

也许有人需要它：我通过CSS（一张表包含一列）将TR转换为TD。从第二行开始直到TR的表格末尾应用以下代码：

<tr style="float:left;">

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

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

将TD列转换为TR行

4 个答案: