For loop Jquery creating table

Question

I have been trying to create a table dynamically based on an array return from another function.

I have 2 array :

var listOfNames = ['a', 'b', 'c'];
var scoreLabels = ['Query', 'Entry', '% Matched', 'Alignment Len', 'Mismatches', 'Gaps', 'E-Value', 'Bitscore'];

The first array will contain element which will be id of each row.

The second array is the list of columns for each row.

My html looks like this

<table>
  <tbody></tbody>
</table>

and the for loop that I have written looks like this :

for (var i = 0; listOfNames.length < i; i++) {
  var row = $('<tr></tr>');
  $(row).attr('id', listOfNames[i]);

  for (var x = 0; scoreLabels.length < x; x++) {
      var tableHeader = $('<td></td>');
      $(tableHeader).attr('text', scoreLabels[x]);
      $(tableHeader).appendTo(row);      
  } 
$(row).appendTo('table');
}

I have been looking at other posts that teaches the creation of table dynamically with jquery, but to no avail.

Please kindly advice and let me know where i went wrong .

The js fiddle can be found here

http://jsfiddle.net/t16scofy/2

`for (var i = 0; listOfNames.length < i; i++)` <-- Are you sure about your stop condition there? — Frédéric Hamidi, Sep 08 '14 at 12:34
You fiddle has a typo `for (var i = 0; listOfNames.lenth < i; i++)` — DontVoteMeDown, Sep 08 '14 at 12:34
`row` is already a jQuery collection, theres no need to wrap it again. Also, you spelt `table` incorrectly in your `appendTo()` method, so nothing happens with `row` — George, Sep 08 '14 at 12:35
sorry typo has been fixed but still doesnt work... was smashing my head on the keyboard for the past hour. — biobirdman, Sep 08 '14 at 12:35
possible duplicate of [Create table with jQuery - append](http://stackoverflow.com/questions/8749236/create-table-with-jquery-append) — 0lli.rocks, Sep 08 '14 at 12:37
Your `for loop` conditions don't look right to me. http://jsfiddle.net/MelanciaUK/t16scofy/3/ — emerson.marini, Sep 08 '14 at 12:37

score 1 · Accepted Answer · edited Jun 20 '20 at 09:12

For-loops...

Just read your for-loops out loud:

for (var i = 0; listOfNames.length < i; i++) {...}

becomes:

for i - starting at 0 - do ... as long as the length of listOfNames is smaller then i.

I starts at 0. and the length of listOfNames is always larger then 0. It is never smaller. so this for loop will never do ...

Same goes for you inner for-loop

corrected:

for (var i = 0; i < listOfNames.length; i++) {...}

or if you really want the i after the .length:

for (var i = 0; listOfNames.length > i; i++) {...}

score 1 · Answer 2 · answered Sep 08 '14 at 12:39

You have a few typos and wrong conditions in both your for loops.

This should do it:

var listOfNames = ['a', 'b', 'c'];

var scoreLabels = ['Query', 'Entry', '% Matched', 'Alignment Len', 'Mismatches', 'Gaps', 'E-Value', 'Bitscore'];

// If i starts with 0, and you're incrementing it, you obviously want the loop 
// to go until it reaches a bigger value, not the other way round.
for (var i = 0; i < listOfNames.length; i++) {
    var row = $('<tr>', { class: i.toString() });

    // If x starts with 0, and you're incrementing it, you obviously want the loop 
    // to go until it reaches a bigger value, not the other way round.
    for (var x = 0; x < scoreLabels.length; x++) {
        var tableHeader = $('<td>', { text: scoreLabels[x] });

        tableHeader.appendTo(row);
    }

    row.appendTo('table');
}

Demo

For loop Jquery creating table

2 Answers2

For-loops...

corrected: