Convert array into table

Question

I'm writing a dynamic table, the data is reading from array, but I can't successfully create the table, did I make something wrong?

html part:

<tr id="rowTitle">
  <td align="middle"><strong>Name</strong></td>
</tr>

jQuery part:

var name = ["Laura","Michael","Steve"]
var count = 0

for (var i = 0; i < name.length; i++) {
    var row = '<tr>'
            + '<td>' + name[count] + '</td>'
            count++
            + '</tr>'
}

$(row).insertAfter($('#rowTitle'))

Dhara Parmar · Accepted Answer · 2016-06-08 10:14:39Z

1

Try this:

var name = ["Laura","Michael","Steve"]
var count = 0
var row = ''; // initialize row outside loop 
for (var i = 0; i < name.length; i++) {
  row += '<tr>'+ '<td>' + name[count] + '</td>'+(count++)+'</tr>'; // append html string into row using +=
}
$(row).insertAfter($('#rowTitle')); // insert html after #rowTitle

answered Jun 8, 2016 at 10:14

Dhara Parmar

8,1231 gold badge19 silver badges27 bronze badges

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

Comments

davidkonrad · Accepted Answer · 2016-06-08 10:24:37Z

1

You are only inserting the last <tr>, insertAfter() should be called in each loop. However, when you are using jQuery, I think you actually should use jQuery - building up plain HTML in strings is a bad idea :

var array = ["Laura","Michael","Steve"], $td, $tr;
array.forEach(function(value) {
  $tr = $('<tr>').insertAfter($('#rowTitle')), $td = $('<td>').appendTo($tr)
  $td.text(value)
})

Produces valid markup with rows in same order as array. And as a side-effect, more readable and more maintainable than creating complex '<tr>' + '<td>' etc strings.

answered Jun 8, 2016 at 10:24

davidkonrad

85.7k17 gold badges211 silver badges273 bronze badges

Collectives™ on Stack Overflow

Convert array into table

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related