javascript - 如何将 jQuery 对象转换为 HTML

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/