Как инвертировать (транспонировать) строки и столбцы таблицы HTML?

Question

Я хочу транспонировать строки и столбцы в таблице HTML, то есть строки в виде столбцов, столбцы в виде строк.

Каким образом я могу это сделать?

Пример:

1 4 7  
2 5 8  
3 6 9

как

1 2 3  
4 5 6  
7 8 9  

Answer 1

http://jsfiddle.net/CsgK9/2/

html:

<table>
    <tr>
        <td>1</td>
        <td>4</td>
        <td>7</td>
    </tr>
    <tr>
        <td>2</td>
        <td>5</td>
        <td>8</td>
    </tr>
    <tr>
        <td>3</td>
        <td>6</td>
        <td>9</td>
    </tr>
</table>


<p><a href="#">Do it.</a></p>

js:

$("a").click(function(){
    $("table").each(function() {
        var $this = $(this);
        var newrows = [];
        $this.find("tr").each(function(){
            var i = 0;
            $(this).find("td").each(function(){
                i++;
                if(newrows[i] === undefined) { newrows[i] = $("<tr></tr>"); }
                newrows[i].append($(this));
            });
        });
        $this.find("tr").remove();
        $.each(newrows, function(){
            $this.append(this);
        });
    });

    return false;
});

Answer 2

Это решение CSS от David Bushell (с использованием flexbox): http://dbushell.com/2016/03/04/css-only-responsive-tables/

И еще это решение CSS (с использованием float)

tr { display: block; float: left; }
th, td { display: block; }

http://jsfiddle.net/XKnKL/3/

(оба они упоминаются в этом ответе: HTML-таблица с вертикальными строками )

Answer 3

Это должно работать для произвольного HTML:

function swap( cells, x, y ){
   if( x != y ){     
   var $cell1 = cells[y][x];
   var $cell2 = cells[x][y];
   $cell1.replaceWith( $cell2.clone() );
   $cell2.replaceWith( $cell1.clone() );
    }
}

var cells = [];
$('table').find('tr').each(function(){
    var row = [];
    $(this).find('td').each(function(){
       row.push( $(this) );    
    });
    cells.push( row );
});

for( var y = 0; y <= cells.length/2; y++ ){
    for( var x = 0; x < cells[y].length; x++ ){
        swap( cells, x, y );
    }   
}

Рабочая скрипка:

http://jsfiddle.net/Hskke/1/

Answer 4

На каком языке вы хотите это сделать?Я предполагаю JavaScript, как вы сказали, jQuery.(jQuery - это не язык, это библиотека для языка)

Вам необходимо найти способ представления таблицы как структуры данных.Это должно быть сделано через ООП для простоты.Я рекомендую вам получить количество столбцов и строк и поместить данные в один простой плоский массив.

Вам также нужно спроектировать что-то, что будет анализировать HTML и получать таблицу, преобразовывая ее в вашу структуру., что позволяет легко выполнять вычисления.Это можно сделать с помощью метода jQuery.

Затем вам нужно найти функцию сортировки, которая сортирует плоский массив.

Наконец, вам нужно разбить массив на соответствующие столбцы и строки.и перерисовать HTML.

Смотрите!Не так сложноПроектирование в значительной степени сделано для вас, все, что вам нужно, это реализовать его.(Может быть, я не должен делать так много работы для тебя ..)