Преобразование столбцов TD в строки TR

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

A B C D
1 2 3 4

и я хочу перевести на:

A 1
B 2
C 3
D 4

??

6
css html html-table javascript

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> тег поставляется с идентификатором (например:<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-страницу остается в качестве упражнения для читателя. Если кто-то замечает какие-либо ошибки, которые я пропустил, я буду рад, если вы укажете их мне или просто отредактируете, чтобы исправить:)

8

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

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, хорошо бы уйти.

2

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

исходя из этого:

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

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

2

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

<tr style="float:left;">

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

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