使用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布局的理想场所。

无需编写大量疯狂的Dom操纵javascript，只需用divs替换TD标签并使它们float:left

进一步append不会按照您的想法做。 它是dom操纵，而不是字符串操纵-您不能使用它直接以您想的方式更改HTML。

进一步阅读

Answer 2

尝试查看.after（）; 功能：

http://api.jquery.com/之后

Answer 3

我认为您需要尝试使用此选择器

假设您的表有一个名为example的ID，请尝试这样

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

Answer 4

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

Answer 5

您想在tr元素上进行追加，而不要在td.row上进行追加

Answer 6

你需要不觉得在构建HTML标记的条款。 无法将</tr><tr>的关闭/打开操作插入DOM（没有一些难看的.innerHTML hacks）。

而是在当前行之后创建一个新行，然后将单元格重新放置到该新行中。

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) );
});

演示： 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/