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

Ответ 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;
});

Ответ 2

Это должно работать для произвольного 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/

Ответ 3

Это решение CSS Дэвида Бушелла (используя 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 с вертикальными строками)

Ответ 4

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

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

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

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

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

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

Ответ 5

У меня есть аналогичная проблема, но я хочу перенести таблицу

$("table.cennik").each(function() {
        var $this = $(this);
        var newrows = [];
        $('#summaryProductName, #pcalPricelistName').remove();
		$(this).find('th').removeAttr('rowspan').removeAttr('colspan');
		$this.find('th').eq(1).attr('rowspan','2');
        $this.find("tr").each(function(){
            var i = 0;
            $(this).find("td,th").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);
        });
    });

td { border: 1px solid #929292;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<table id="1_1" class="cennik ui-table" style="float:left; margin-right: 20px;" cellspacing="0">
 <tbody>
  <tr>
    <th rowspan="2">Quantity </th>
    <th colspan="2">Price</th>
   </tr>
   <tr>
    <td id="spCalPricelistName"> First price </td>
    <td id="spCalPricelistName"> Second price </td>
   </tr>
   <tr>
    <td>1 - 2</td>
    <td>15 zł</td>
    <td>20 zł</td>
   </tr>
   <tr>
    <td>3 - 9</td>
    <td>12 zł</td>
    <td>17,50 zł</td>
   </tr>
   <tr>
    <td>10+</td>
    <td>10 zł</td>
    <td>15 zł</td>
   </tr>
  </tbody>
 </table>