以更好的方式從數組中生成html

假設我有一個Customer結構數組，我需要從中生成HTML。以更好的方式從數組中生成html

目前，我做這樣的事情：

jQuery.each(customers, function(index, item) { 
    html =+ "<tr custID='" + item.ID + "'><td>" + item.Name + "</td><td>" + item.City + "</td></tr>"; 
});

這裏的問題是，我手動添加CUSTID屬性。我相信這樣做很酷的方法是使用jQuery的Data函數。

但是我會如何在這種情況下使用它？

來源

2012-07-30 David

只是谷歌的JavaScript模板引擎或MVVM JavaScript框架。 – madfriend 2012-07-30 22:00:06

我以前使用過http://api.jquery.com/tmpl/。工作得很好。 – powerbuoy 2012-07-30 22:03:28

使用模板引擎並不會在js中串聯字符串而生成html。 – 2012-07-30 22:05:09

優雅的方式是不附加這些HTML標籤，就好像它們是文本，但使用

創建元素

document.createElement("tr");

你可以修改它的屬性，然後將它附加到html文件中。

來源

2012-07-30 22:08:00

只是data-前綴屬性：

jQuery.each(customers, function(index, item) { 
    html += "<tr data-custID='" + item.ID + "'><td>" + item.Name + "</td><td>" + item.City + "</td></tr>"; 
});

現在，您可以訪問使用jQuery的方法的數據。

（我改變了不存在的=+運營商+=。猜猜它只是在問題的拼寫錯誤。）

來源

2012-07-30 22:01:51 Guffa

您可以使用數據網格，我認爲這是比手動創建表冷得多。但在你的情況下，你必須使用append（）函數。

這裏是很好的例子： http://jquery-howto.blogspot.com/2009/02/add-table-row-using-jquery-and.html http://api.jquery.com/append/

來源

2012-07-30 22:04:09