Question

我想将表格中的单元格移动到新行。该表只包含一行，包含四个单元格。第三个是我需要的。必须从现有行中删除单元格，因此只有新单元格包含该单元格。

这是我的标记：

<table class="sbtable">
<tbody>
<tr class="sbrow">
<td class="first">Blah</td>
<td class="second">Blah</td>
<td class="third">Blah</td>
<td class="last">Blah</td>
</tr>
</tbody>
</table>

JQuery的：

function formatSearchBox() {
$(".sbtable").each(function () {
    var table = $(this);
    var firstRow = $(table).find("tr:first");
    var cell = $(firstRow).find("td").eq(2);
    var newRow = "<tr></tr>";
    $(newRow).append($(cell));
    console.log(newRow);
    $(newRow).append("<td></td><td></td><td></td>");
    $(firstRow).after($(newRow));
});
}

我的问题是脚本只插入空白<tr></tr>，我完全不知道为什么。我需要这样的HTML：

<table class="sbtable">
<tbody>
<tr class="sbrow">
<td class="first">Blah</td>
<td class="second">Blah</td>
<td class="last">Blah</td>
</tr>
<tr>
<td class="third">Blah</td>
<td></td>
<td></td>
</tr>
</tbody>
</table>

Answer 1

您的选择器错误，如上面的评论所述，但主要问题是您必须更新newRow var，如下所示：

$(newRow).append($(cell));

你需要

newRow = $(newRow).append($(cell));

试试这个http://jsfiddle.net/aamir/dc6fM/3/

$(".sbtable").each(function () {
    var table = $(this);
    var firstRow = $(table).find("tr:first");
    var cell = $(firstRow).find("td:eq(2)");
    var newRow = "<tr></tr>";
    newRow= $(newRow).append(cell);
    newRow.append("<td></td><td></td>");
    $(firstRow).after(newRow);
});

如果您愿意，可以尝试缩短版本：http://jsfiddle.net/aamir/dc6fM/2/

$(".sbtable").each(function () {
    var $table = $(this);
    var $cell = $table.find("tr:first td:eq(2)");
    $table.append($("<tr>").append($cell,"<td></td><td></td>"))        
});

甚至更短：http://jsfiddle.net/aamir/dc6fM/5/

Answer 2

您已创建3个单独的行：

var newRow = "<tr></tr>";
$(newRow).append($(cell)); // new row created and cell appended to it
$(newRow).append("<td></td><td></td><td></td>");  // a different new row created, 3 cells appended
$(firstRow).after($(newRow)); // yet another row created, empty and appended

每次拨打$(newRow)时，您都会创建另一个全新的行。

而是将行保存到变量：

var $newRow = $("<tr></tr>");
$newRow.append($(cell)); 
$newRow.append("<td></td><td></td><td></td>");  
$(firstRow).after($newRow);

Answer 3

你的newRow变量只是一个字符串，使用jquery .append方法对你不起作用。 newRow需要成为一个jquery对象才能使用。

var newRow = $("<td></td>");
newRow.append("<td></td><td></td><td></td>");

另请注意，在第二行中，我没有使用$（newRow），因为变量已经引用了Jquery对象。我在调用$（table）和$（firstRow）时看到你正在这样做。

使用JQuery将现有单元格从现有行移动到新行

3 个答案: