如何將jQuery對象轉換爲HTML

我有一個帶有固定標題的4列的表格，並且想用jQuery動態添加行。如何將jQuery對象轉換爲HTML

我用以下方法：

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>);，但不想去用這種方法。

來源

2016-12-19 Gags

問題是因爲'res.a'，'res.b'等都是對象本身，而不是字符串。您需要連接對象的字符串屬性，而不是對象本身。我們需要看到實際的'data'值給你更具體的幫助 –

請指定你的數據... –

res是一個json對象，res.a返回一些說測試名稱等等。如果您需要更多信息，我將指定哪些更具體的數據 – Gags

剛跳過 '加入（「」），' 一步，它的工作原理：

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/

來源

2016-12-19 13:25:39 Aviad

我知道這種方法。那麼我的方法和糾正 – Gags

我試圖按照他使用的方法^^，無論如何他得到[對象，對象]的原因是因爲他試圖加入HTML對象（包裝後他們$（「」）） .text（data）），而不是因爲它不是文本。 – Aviad

保持您在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");

}）;

來源

2016-12-20 08:38:00

錯誤的方法。爲什麼我應該指定列名？如果是這樣的話，我爲什麼要重複這4個結果。我認爲你理解錯誤的要求 – Gags

感謝糾正我。 –

如何將jQuery對象轉換爲HTML

回答

相關問題