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

不要使用TD代替divs标记，而是将float:left标记替换为append

此外，dom没有按照您的想法行事。它是{{1}}操纵而不是字符串操作 - 你不能用它来直接改变你想象的方式。

Further reading

Answer 2

试着看.after（）;功能：

http://api.jquery.com/after

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黑客攻击）。

相反，在当前行之后创建一个新行，并将单元格重新定位到该新行中。

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

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

使用JQuery .append（）动态更改表格布局

6 个答案: