使用JQuery .append()动态改变表格布局

Using JQuery .append() to dynamically change table layout

本文关键字：改变 表格 布局 动态 JQuery append 使用      更新时间：2023-09-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>');

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

这是使用流畅CSS布局的完美地方。

与其编写大量疯狂的dom操纵javascript，不如简单地将TD标记替换为divs，并将其命名为float:left

进一步- append不做你认为它做什么。这是dom操作，而不是字符串操作-你不能用它来直接改变HTML的方式，你的想法。

进一步阅读

试着看看。after();功能:

http://api.jquery.com/after

我认为你需要尝试使用这个选择器

假设你的表有一个名为example的id，试试这样

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

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

您需要在tr元素上执行追加操作，而不是在td.row

您需要从构造HTML标记的角度考虑而不是。没有办法将关闭/打开</tr><tr>拼接到DOM中(没有一些丑陋的.innerHTML hack)。

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

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/

相关文章：