将数组转换为表格答案

【问题标题】：Convert array into table将数组转换为表格
【发布时间】：2016-10-08 13:06:25
【问题描述】：

我正在写一个动态表，数据是从数组中读取的，但是我无法成功创建表，是我做错了吗？

html部分：

<tr id="rowTitle">
  <td align="middle"><strong>Name</strong></td>
</tr>

jQuery 部分：

var name = ["Laura","Michael","Steve"]
var count = 0

for (var i = 0; i < name.length; i++) {
    var row = '<tr>'
            + '<td>' + name[count] + '</td>'
            count++
            + '</tr>'
}

$(row).insertAfter($('#rowTitle'))

【问题讨论】：

标签： jquery arrays dynamic html-table

【解决方案1】：

试试这个：

var name = ["Laura","Michael","Steve"]
var count = 0
var row = ''; // initialize row outside loop 
for (var i = 0; i < name.length; i++) {
  row += '<tr>'+ '<td>' + name[count] + '</td>'+(count++)+'</tr>'; // append html string into row using +=
}
$(row).insertAfter($('#rowTitle')); // insert html after #rowTitle

【讨论】：

【解决方案2】：

您只插入最后一个<tr>，insertAfter() 应在每个循环中调用。但是，当您使用 jQuery 时，我认为您实际上应该使用 jQuery - 在字符串中构建纯 HTML 是一个坏主意：

var array = ["Laura","Michael","Steve"], $td, $tr;
array.forEach(function(value) {
  $tr = $('<tr>').insertAfter($('#rowTitle')), $td = $('<td>').appendTo($tr)
  $td.text(value)
})

产生与array 相同顺序的行的有效标记。并且作为副作用，比创建复杂的 '<tr>' + '<td>' 等字符串更具可读性和可维护性。

【讨论】：