Question

我有一个包含4列固定标题的表，并希望使用jQuery动态添加行。

我使用了以下方法：

data.forEach(function(res, i) {     
    var cols = (function() {
        var colp = [];
        [res.a, res.b, res.c, res.d].forEach(function(data){
            colp.splice(colp.length, 0, $("<td/>").text(data));
        });
        return colp;
    })();
    $("<tr/>").html(cols.join("")).appendTo(".cotainer");
});

data从服务返回，我正在用foreach循环迭代它。然而，通过这种方法，我得到输出：

<tr>[Object, Object][Object, Object][Object, Object][Object, Object]</tr>
<tr>[Object, Object][Object, Object][Object, Object][Object, Object]</tr>
.... upto no of results returned.

我知道有一种方法是colp.splice(colp.length, 0, "<td>" + data + </td>);，但不想采用这种方法。

Answer 1

只需跳过'join（“”）步骤就可以了：

data.forEach(function(res, i) {     
    var cols = (function() {
        var colp = [];
        [res.a, res.b, res.c, res.d].forEach(function(data){
            colp.splice(colp.length, 0, $("<td/>").text(data));
        });
        return colp;
    })();
    $("<tr/>").html(cols).appendTo(".cotainer");
});

我认为这种方式更清晰：

data.forEach(function(res) {
    var row = $('<tr>');
    [res.a, res.b, res.c, res.d].forEach(function(data){
      row.append($('<td>').text(data));
    });
    $('.cotainer').append(row);
});

工作示例：https://jsfiddle.net/m8gdc9ks/1/

Answer 2

将您的要求保留在returnColumnName中，该名称位于数据对象

中

data.forEach(function(res, i) {     
var cols = (function() {
    var colp = [];
    [res.a, res.b, res.c, res.d].forEach(function(data){
        colp.splice(colp.length, 0, $("<td/>").text(data.returnColumnName));
    });
    return colp;
})();
$("<tr/>").html(cols.join("")).appendTo(".cotainer");

}）;

如何将jQuery对象转换为HTML

2 个答案: