Конвертировать столбцы TD в строки TR

Question

Есть ли быстрый способ перевести (используя CSS или Javascript) таблицы TD в TR, в настоящее время у меня есть:

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> имеет идентификатор (например: <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

Это решение, в данном случае это было для мобильных телефонов и планшетов, удалите медиазапросы и абсолютную позицию, и они у вас есть!

на основании этого:

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

http://css -tricks.com / отзывчивая-данные таблицы /

Answer 3

Вот протестированная функция, которая будет транспонировать таблицу, и она сохранит все форматирование / события, которые вы подключили к любым элементам в таблице (например, щелчки по ячейке или содержимому ячейки)

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 4

Может, кому-то это нужно: я преобразовал TR в TD с помощью CSS (таблица с одним столбцом). Применить от второй строки до конца таблицы на TR код ниже:

<tr style="float:left;">

Также использовал код ниже, чтобы показать каждые 3 строки как одну строку из 3 столбцов:

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