Question

我想动态构造一个像这样的表行：

        var row = $("<tr>");
        row.html(
            $("<td>").html("cell 1") +
            $("<td>").html("cell 2") 

        );
        return row;

它不适用于多个$("<td>")。它产生一个html为Object object的表格行。

但是，它只适用于一个td。所以我认为这是可能的，但我不知道如何。

知道如何制作这个吗？

我也试过追加并添加。

感谢您的帮助！

编辑：

我之前就是这样做的：

return "<tr><td>cell1</td><td>cell2</td></tr>" /* etc.. */ ;

但这会变成一个带有属性等的可怕/不可读/不可编辑的代码。

Answer 1

有多种方式......

1. children.appendTo(parent);

2. parent.append(children);

3. parent.html(children);

在你的情况下，类似的东西应该有效：

var row = $('<tr>');

$("<td>Hello world</td>").appendTo(row);

无需退货： - ）

Answer 2

就像这样做

$("<tr><td>hi</td><td>hi</td><td></td><td></td><td></td><td></td><td></td><td></td><td>lol</td></tr>").appendTo($("something"));

Answer 3

这是一种实现这一目标的功能性方法：

//data is an array of text/data/whatever
function createRow(data) {
    var row = $("<tr>");
    var td;

    for (var i = 0; i < data.length; i++) {
        td = $("<td>").html(data[i]);
        row.append(td);
    }
    return row;
}

然后只需将返回的行追加到您想要的任何html元素

请参阅此JSFiddle

Answer 4

因为你有jQuery对象使用.append（）

var row = $("<tr>");
row.append($("<td>").html("cell 1")).append($("<td>").html("cell 2"));
return row;

稍有不同的版本

var row = $("<tr>");
row.append($("<td>", {
    html: "cell 1"
})).append($("<td>", {
    html: "cell 2"
}));
return row;

如何使用jQuery在另一个内部创建多个html元素？

编辑：

4 个答案: