Add rows to table from list javascript

Question

So I did some looking and couldn't find anything I needed or that would work for my situation.

I currently have a list that has 29 values and as it expands, it's going to get difficult and tiresome to add a table row for each value.

I have currently got the table all written out how I want it but would like to have some javascript do it on its own so all I have to do is add a new value to the list.

In the end, the complete table should look like this, http://hastebin.com/nesuyikiso.xml (that is what I have written out).

The list I will be working off is

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"];

I understand a for loop would be needed but I don't know enough about them to save my life. If someone could help me out it'd be much appreciated.

Thanks.

EDIT: I will accept jQuery as I am using it for other stuff on this page. Also, if someone could explain why this code won't work for what I want?

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

First of all in your code you have mistyped the label for=. In your first checkbox you have it right, the for= is connected to the id of the input. The others don't match! — loveNoHate
– loveNoHate, Commented Feb 4, 2014 at 4:22
@dollarvar Thanks. I had changed everything else but forgot to fix that. — Spedwards
– Spedwards, Commented Feb 4, 2014 at 4:32

dfsq · Accepted Answer · 2014-02-04 06:21:32Z

You can render you table using next method. First of all declare HTML and HTML template to populate rows. I put template into script 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>

To render heroes this simple javascript can assist:

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

Demo: http://jsfiddle.net/N3MyV/

UPD. Improved jQuery version of OP script

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

Couple of notes. 1. Try to avoid selecting nodes inside loops, it is pretty expensive operations. Note how I cached $tbody before each-loop. 2. Try to cache as much as possible. In the example above you don't need to reselect tr again and again, it's already available in $tr variable.

Following these simple rules you improve performance of your code significantly.

Demo: http://jsfiddle.net/N3MyV/1/

This works perfectly however I am going to use my script as I find it simpler to understand and it's my own. Nothing against yours, just want to use my own however thanks for the reply.
Sure, however I should note that your current script has serious performance issues. I can update my answer with improvements.

Collectives™ on Stack Overflow

Add rows to table from list javascript

1 Answer 1

Demo: http://jsfiddle.net/N3MyV/

UPD. Improved jQuery version of OP script

Demo: http://jsfiddle.net/N3MyV/1/

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Demo: http://jsfiddle.net/N3MyV/

UPD. Improved jQuery version of OP script

Demo: http://jsfiddle.net/N3MyV/1/

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related