从列表javascript向表中添加行

所以我找了一些东西，但找不到任何我需要的或适合我的情况的东西

我现在有一个29个值的列表，随着它的扩展，为每个值添加一个表行将变得困难和烦人

我现在已经把表都写出来了，但是我想让一些javascript自己来做，所以我所要做的就是在列表中添加一个新值

最后，完整的表应该是这样的（这就是我写出来的）

我将要列出的清单是

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>&nbsp;</td>');
});

$。每个（heroesName、函数（索引、值）{
$（'tbody'）。附加（''）；
$（'tr#'+索引）；
$（'tr#'+索引）.append（''+value+''）；
$（'tr#'+索引）；
$（'tr#'+index）.append（'nonepressive 1Prestige 2Prestige 3Prestige 4Prestige 5'）；
$（'tr#'+索引）；
});

您可以使用下一种方法呈现表格。首先声明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>

活跃的
英雄
水平仪
声望
服装
是活动的吗？
{{name}}
没有一个
声望1
声望2
声望3
声望4
声望5

要呈现英雄，此简单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 table=document.getElementById（'table'），
template=document.getElementById（'template'）.innerHTML，
行=“”；
for（var i=0；i

演示： UPD。改进的jQuery版本的OP脚本

var$tbody=$（'tbody'）；
$.each（heroesName，函数（索引，值）{
$tr=$（''）；
$tr.append（'Is Active？'）；
$tr.append（“”+值+“”）；
$tr.append（“”）；
$tr.append（'NonePrestige 1Prestige 2Prestige 3Prestige 4Prestige 5'）；
$tr.append（“”）；
$tbody.append（$tr）；
});

几张便条。1.尽量避免在循环中选择节点，这是非常昂贵的操作。注意我是如何在每个循环之前缓存

$tbody

。2.尽可能多地尝试缓存。在上面的示例中，您不需要一次又一次地重新选择

tr

，它已经在

$tr

变量中可用

遵循这些简单规则可以显著提高代码的性能

---

演示：首先，在代码中，您错误地键入了=的

标签。在第一个
复选框中
正确无误，for=

的

连接到
输入的
id
。其他人不匹配@多拉瓦谢谢。我已经更改了所有其他内容，但忘了修复它。请检查所有的
”
和
“
@多拉瓦再次感谢你。错过了一个“不客气，很乐意帮助！这是完美的作品，但我将使用我的脚本，因为我发现它更容易理解，它是我自己的。没有反对你的，只是想用我自己的但是谢谢你的回复。当然，但是我应该注意到你当前的脚本有严重的性能问题。我可以通过改进来更新我的答案。
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>&nbsp;</td>');

    $tbody.append($tr);
});