所以我做了一些寻找，找不到我需要的东西，或者对我的情况有用。
我目前有一个包含29个值的列表，当它扩展时，为每个值添加一个表格行会变得困难和烦人。
我目前得到的表格都是我想要的，但我想自己做一些javascript，所以我要做的就是在列表中添加一个新值。
最后，完整的表应如下所示http://hastebin.com/nesuyikiso.xml（这就是我写的）。
我将要处理的清单是
var heroesName = ["Black Panther","Black Widow","Cable","Captain America","Colossus","Cyclops","Daredevil","Deadpool","Emma Frost","Gambit","Ghost Rider","Hawkeye","Hulk","Human Torch","Iron Man","Jean Grey","Loki","Luke Cage","Ms Marvel","Nightcrawler",/*"Nova",*/"Punisher","Rocket Raccoon","Scarlet Witch","Spider-Man","Squirrel Girl","Storm","Thing","Thor","Wolverine"];
我理解需要一个for循环，但我不太了解它们来挽救我的生命。如果有人可以帮助我，我会非常感激。
感谢。
编辑：我会接受jQuery，因为我正在使用它来处理此页面上的其他内容。 另外，如果有人能够解释为什么这段代码不适用于我想要的东西呢？
$.each(heroesName, function(index, value) {
$('tbody').append('<tr id="row' + index + '"></tr>');
$('tr#' + index).append('<td><input type="checkbox" id="active' + index + '"/><label for="active' + index + '" class="inline">Is Active?</label></td>);
$('tr#' + index).append('<td value="' + value + '">' + value + '</td>');
$('tr#' + index).append('<td><input type="text" maxlength="2" size="2"/></td>');
$('tr#' + index).append('<td><select id="select' + index + '"><option value="0">None</option><option value="1">Prestige 1</option><option value="2">Prestige 2</option><option value="3">Prestige 3</option><option value="4">Prestige 4</option><option value="5">Prestige 5</option></select></td>');
$('tr#' + index).append('<td> </td>');
});
答案 0 :(得分：2)
您可以使用下一个方法渲染表格。首先声明HTML和HTML模板来填充行。我将模板放入脚本块。
<table cellpadding="0" cellspacing="0" class="sortable" id="table">
<thead>
<tr>
<th>Active</th>
<th>Heroes</th>
<th>Level</th>
<th>Prestige</th>
<th>Costume</th>
</tr>
</thead>
<tbody></tbody>
</table>
<script type="text/template" id="template">
<tr>
<td>
<input id="bpa_{{i}}" type="checkbox"/>
<label class="inline" for="bpa_{{i}}">Is Active?</label>
</td>
<td>{{name}}</td>
<td>
<input maxlength="2" size="2" type="text"/>
</td>
<td>
<select id="bps_{{i}}">
<option value="0">None</option>
<option value="1">Prestige 1</option>
<option value="2">Prestige 2</option>
<option value="3">Prestige 3</option>
<option value="4">Prestige 4</option>
<option value="5">Prestige 5</option>
</select>
</td>
<td></td>
</tr>
</script>
要渲染英雄，这个简单的JavaScript可以提供帮助：
var table = document.getElementById('table'),
template = document.getElementById('template').innerHTML,
rows = '';
for (var i = 0; i < heroesName.length; i++) {
rows += getHTML(template, {
i: i,
name: heroesName[i]
});
}
table.tBodies[0].innerHTML = rows;
function getHTML(tpl, data) {
return tpl.replace(/\{\{(.*?)\}\}/g, function(a, b) {
return data[b] || '';
});
}
var $tbody = $('tbody');
$.each(heroesName, function(index, value) {
$tr = $('<tr id="row' + index + '"></tr>');
$tr.append('<td><input type="checkbox" id="active' + index + '"/><label for="active' + index + '" class="inline">Is Active?</label></td>');
$tr.append('<td value="' + value + '">' + value + '</td>');
$tr.append('<td><input type="text" maxlength="2" size="2"/></td>');
$tr.append('<td><select id="select' + index + '"><option value="0">None</option><option value="1">Prestige 1</option><option value="2">Prestige 2</option><option value="3">Prestige 3</option><option value="4">Prestige 4</option><option value="5">Prestige 5</option></select></td>');
$tr.append('<td> </td>');
$tbody.append($tr);
});
几个笔记。 1.尽量避免选择循环内的节点，这是非常昂贵的操作。请注意我在每个循环之前如何缓存$tbody。 2.尝试尽可能多地缓存。在上面的示例中，您无需一次又一次地重新选择tr，它已在$tr变量中提供。
遵循这些简单的规则可以显着提高代码的性能。