javascript - 以更好的方式从数组生成 html

Question

假设我有一组 Customer 结构，我需要从中生成 HTML。

目前我做这样的事情：

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

这里的问题是我手动添加了 custID 属性。我相信最酷的方法是使用 jQuery 的 Data 函数。

但是在这种情况下我将如何使用它呢？

Answer 1

优雅的方法不是像文本一样附加这些 html 标签，而是使用创建元素

document.createElement("tr");

您可以修改其属性，然后将其附加到 html 文件中。

在这里阅读更多：

jQuery document.createElement 等效？

Answer 2

只需在属性前面加上data-：

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

现在您可以使用 jQuery 中的方法访问数据。

（我将不存在的=+运算符更改为+=。猜猜这只是问题中的一个错字。）

Answer 3

您可以使用数据网格，我认为它比手动创建表格要酷得多。但在你的情况下，你必须使用 append() 函数。

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