javascript - 从列表javascript向表添加行

Question

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

我目前有一个包含 29 个值的列表，随着它的扩展，为每个值添加一个表行会变得困难和烦人。

我目前已经将表格全部写出我想要的方式，但我想让一些 javascript 自己完成它，所以我所要做的就是向列表中添加一个新值。

最后，完整的表格应该是这样的，http://hastebin.com/nesuyikiso.xml (这就是我写出来的)。

我要处理的 list 是

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

Answer 1

您可以使用下一个方法呈现表格。首先声明 HTML 和 HTML 模板来填充行。我将模板放入脚本 block 。

<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] || '';
    });
}

演示:http://jsfiddle.net/N3MyV/

更新。改进的 jQuery 版本的 OP 脚本

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);
});

一些笔记。 1.尽量避免选择循环内的节点，这是非常昂贵的操作。请注意我是如何在每次循环之前缓存 $tbody 的。 2.尽量缓存。在上面的示例中，您不需要一次又一次地重新选择 tr，它已经在 $tr 变量中可用。

遵循这些简单的规则，您可以显着提高代码的性能。

演示:http://jsfiddle.net/N3MyV/1/