使用 JQuery .append() 动态更改表格布局答案

【问题标题】：Using JQuery .append() to dynamically change table layout使用 JQuery .append() 动态更改表格布局
【发布时间】：2017-10-06 00:49:26
【问题描述】：

我正在使用 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>');

然而，它仍然在一行上显示所有元素。知道为什么吗？

【问题讨论】：

不要这样做。仅仅为了布局而改变元素打破了元素与样式分离的整个概念。

标签： javascript jquery html html-table append

【解决方案1】：

这是使用流畅 CSS 布局的理想场所。

与其编写大量疯狂的 Dom 操作 javascript，只需将您的 TD 标签替换为 divs 并让它们 float:left

Further-append 并没有按照你的想法去做。这是dom 操作，而不是字符串操作——你不能用它来直接改变你的想法。

Further reading

【讨论】：

【解决方案2】：

尝试查看 .after();功能：

http://api.jquery.com/after

【讨论】：

【解决方案3】：

我觉得你需要试试这个选择器

假设您的表有一个名为 example 的 id 尝试这样

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

【讨论】：

【解决方案4】：

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

【讨论】：

【解决方案5】：

您希望在 tr 元素上进行追加，而不是在 td.row 上

【讨论】：

【解决方案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/

【讨论】：

@Barry：我不得不猜测最终结果的含义。不确定您所说的 “相应地” 是什么意思。我假设您希望最后一个单元格位于其自己的行中。如果这不正确，请描述期望的结果。编辑：也许你的意思是每个单元格一行。我会更新的。
将 Stack Overflow 视为一个开明的讨论社区，并避免使用特技代码做出糟糕的设计决策。
@RSG: Please keep discourse polite. 如果您不同意我回答具体问题而不是提供可能的替代方案的决定，那很好。如果你想对我投反对票，那也没关系。但保持文明。我不相信我们对这种情况了解得足够多，无法知道最好的解决方案是什么。这就是为什么我选择给出一个专注于特定查询的解决方案。如果您认为该问题是 X Y 问题 的示例，请通过评论该问题而不是我的答案向 OP 请求更多信息。
你当然是对的。开明的话语必须是文明的，我的语气没有建设性。我很抱歉。
感谢@RSG。非常感激。 :)