Перемещение столбца в новую строку в зависимости от размера экрана HTML-таблицы

Question

У меня есть таблица из трех столбцов в HTML.Ячейки в третьем столбце принадлежат к одному классу.

Я хочу, чтобы третий столбец в каждой строке переместился на новую строку под столбцом, если ширина экрана меньше 750 пикселей.

Итак, таблица обычно выглядит так:

<table>
 <tr>
  <td></td>
  <td></td>
  <td class="thirdcol"></td>
 </tr>
 <tr>
  <td></td>
  <td></td>
  <td class="thirdcol"></td>
 </tr>
</table>

Если ширина экрана меньше 750 пикселей, я хочу, чтобы функция javascript заставляла таблицу выглядеть так:

<table>
 <tr>
  <td></td>
  <td></td>
 </tr>
 <tr>
  <td class="thirdcol"></td>
 </tr>
 <tr>
  <td></td>
  <td></td>
 </tr>
 <tr>
  <td class="thirdcol"></td>
 </tr>
</table>

Answer 1

Хорошо, вот "простой" способ JavaScript сделать это.Там нет никакого волшебного механизма «выбрать весь столбец» (о котором я знаю), поэтому вы должны делать это построчно, вставляя новые строки по мере продвижения.

var t = document.getElementById("table1"),
    r,
    i;
if (screen.width < 750)
    for(i = t.rows.length - 1; i >= 0; i--) {
        r = t.insertRow(i+1);
        r.appendChild(t.rows[i].cells[2]);
    }

Обратите внимание, что вы неЯ должен явно удалить каждую ячейку, потому что .appendChild() будет перемещать существующих элементов.

Мой код предполагает, что вы можете присвоить вашей таблице идентификатор "table1",и, как вы можете видеть, это жестко закодировано для перемещения третьего столбца - но, конечно, вы могли бы обернуть все это в симпатичную функцию с параметрами для таблицы и тем, какие столбцы нужно переместить: это решать вам ...

Answer 2

Вот JSFiddle с его рабочей версией (с использованием JQuery).Вот мясистая часть, которая фактически выполняет эту работу:

if ($(window).width() < 750) {
    $('td.thirdcol').each(function(i, item) {
        var row = $(item).clone(true).prop('colspan','2').wrapAll('<tr />');
        $(item).closest('tr').after(row);
        $(item).remove();
    });
}

Однако, если бы я был вами, я бы не использовал Javascript или таблицы для этого и использовал бы CSS и плавающие div s.Это именно то, для чего они предназначены.