For loop Jquery creating table [closed]

Question

Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.

This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.

Closed 11 years ago.

Improve this 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
– Frédéric Hamidi, Commented Sep 8, 2014 at 12:34
You fiddle has a typo for (var i = 0; listOfNames.lenth < i; i++) — DontVoteMeDown
– DontVoteMeDown, Commented Sep 8, 2014 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
– George, Commented Sep 8, 2014 at 12:35
sorry typo has been fixed but still doesnt work... was smashing my head on the keyboard for the past hour. — biobirdman
– biobirdman, Commented Sep 8, 2014 at 12:35

Community · Accepted Answer · 2020-06-20 09:12:55Z

1

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++) {...}

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Sep 8, 2014 at 12:38

Pinoniq

1,3859 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

emerson.marini · Accepted Answer · 2014-09-08 12:39:23Z

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

Collectives™ on Stack Overflow

For loop Jquery creating table [closed]

2 Answers 2

For-loops...

corrected:

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

For-loops...

corrected:

Comments

Comments

Linked

Related