Question

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

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'))

Answer 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

Answer 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>'等字符串更具可读性和可维护性。

将数组转换为表

2 个答案: