1

I'm trying to generate dynamic table with jquery. So stuck on appending in appending. Need to write something like this. But of course it have wrong syntax :)

  var $tbl = $('<table>').attr('id', 'basicTable');
  $tbl.append($('<tr>').for(var i = 0; i < 10; i++){($('<td>')});

$('body').append($tbl);
Aram Mkrtchyan
  • 2,690
  • 4
  • 31
  • 47
  • 1
    Don't trust jQuery to properly close you elements, always include the end tag, `$('
    ');` and so on.     – Andrew Nov 21 '11 at 16:54
  • @Andrew: Pretty sure it boils down to `document.createElement('table')`, which skips the concept of "end tags" altother. – Eric Nov 21 '11 at 17:16
  • @Eric For a simple element yes, but for anything else there is a lot more stuff that goes on, that can be screwed up. I think always do this is a lot simpler rule to remember than, do it this way when it's this kind and do it that way when it's that kind. – Andrew Nov 21 '11 at 17:23
  • @Andrew: A better rule of thumb is "don't leave jQuery to construct complex document fragments". – Eric Nov 21 '11 at 17:25

3 Answers3

2

Try the following:

var $tr = $('<tr></tr>');
var i;
for (i = 0; i < 10; i++) {
    $tr.append('<td></td>');
}
var $tbl = $('<table></table>').attr('id', 'basicTable');
$tbl.append($tr);

$('body').append($tbl);

See here for jsFiddle.

Rich O'Kelly
  • 41,274
  • 9
  • 83
  • 114
  • +1, although you can cut out the `var i;` line by just using `for (var i = 0; i < 10; i++) {`... – Rory McCrossan Nov 21 '11 at 16:57
  • @RoryMcCrossan jslint doesn't like that since it can obfuscate matters if two loops use the same variable name (as it looks like there's two variables, but really there's only one), obviously doesn't affect this case, but is just how I write my js now! – Rich O'Kelly Nov 21 '11 at 17:06
  • thanks ) and how to do so and was in the for and it is possible to do so for(var j=0; j<10; j++){ var $tr = $(''); } var i; for (i = 0; i < 10; i++) { $tr.append(''); } var $tbl = $('
    ').attr('id', 'basicTable'); $tbl.append($tr); $('body').append($tbl);     – Aram Mkrtchyan Nov 22 '11 at 06:15
  • I first wrote this .. but it does not work and I do not know why. I need to was in the other for var $tbl = $('').attr('id', 'basicTable'); for (var i = 0; i < seatlist.length; i++) { $tbl.append($('')); var a = $("tr:last"); for (var j = 0; j < seatlist[i].length; j++) { a.append($('
    ')); } } $('.drag_cont').append($tbl); });
     – Aram Mkrtchyan Nov 22 '11 at 06:27
1

This should do it -

var cont = [];
for (var i = 0;i<10;i++) cont.push('<td></td>');
var $tbl = $('<table>').attr('id', 'basicTable');
$tbl.append('<tr>' + cont.join('') + '</tr>');

Demo - http://jsfiddle.net/yeYWP/

See this question for further methods on adding multiple elements of the same type via jQuery - How should I add multiple identical elements to a div with jQuery

Community
  • 1
  • 1
ipr101
  • 24,096
  • 8
  • 59
  • 61
1

Here's how to do it with fewer variables:

var row = $('<tr />');
for(var i = 0; i < 10; i++)
    row.append('<td />');

$('body').append(
    $('<table />').attr('id', 'basicTable').append(row);
);
Eric
  • 95,302
  • 53
  • 242
  • 374