Использование JQuery .append () для динамического изменения макета таблицы.

Question

Я использую таблицу HTML, но хочу динамически изменять макет таблицы в зависимости от размера браузера. Мой основной код выглядит так:

<tr>
  <td class="row">E1</td>
  <td class="row">E2</td>
  <td class="row">E3</td>
  <td class="lastRow">E4</td>
</tr>

Тогда JQuery должен вычислить количество строк и соответственно вставить разрывы строк. Мой JQuery сейчас выглядит так:

$('td.row').append('</tr><tr>');

Тем не менее, все элементы отображаются в одной строке. Есть идеи почему?

Answer 1

Это идеальное место для использования гибких макетов CSS.

Вместо того, чтобы писать множество сумасшедших манипуляций с JavaScript, просто замените ваши TD теги на divs и получите их float:left

Далее- append не делает то, что вы думаете, что делает.Это dom манипулирование, а не манипуляции со строками - вы не можете использовать его для непосредственного изменения HTML так, как вы думаете.

Дальнейшее чтение

Answer 2

Вам нужно не думать с точки зрения построения разметки HTML.Нет способа разделить закрывающий / открывающий </tr><tr> в DOM (без каких-либо уродливых .innerHTML хаков).

Вместо этого создайте новую строку после текущей строки и переместите ячейки в эту новуюстрока.

var row_cells = $('td.row').slice(1);

row_cells.each( function( i, el ) {
    $('<tr>').insertAfter( row_cells.eq(i).parent() )
             .append( row_cells.eq(i) );
});

DEMO: http://jsfiddle.net/EDf5a/

---

Или, возможно, вы хотели новую строку для каждой ячейки:

var row_cells = $('td.row');
var row = row_cells.parent();

row_cells.each(function(i, el) {
    $('<tr>').insertBefore(row)
        .append(row_cells.eq(i));
});

ДЕМО: http://jsfiddle.net/EDf5a/1/

Answer 3

Вы хотели бы сделать добавление к элементу tr, а не к td.row

Answer 4

$('</tr><tr>').insertAfter('.row');

Answer 5

я думаю, что вам нужно попробовать с этим селектором

Если предположить, что у вашей таблицы есть идентификатор с именем example, попробуйте вот так

$("#exmaple tr:last").append('<tr></tr>');

Answer 6

Попробуйте посмотреть на .after (); Функция:

http://api.jquery.com/after