Jquery How to build dynamic html

Question

i want to dynamically create 5 tr each having 3 tds with a loop, note: inside each i am filling dynamic html which has dynamic values that are filled from an array

<tr>
<td><td><td>
</tr>

<tr>
<td><td><td>
</tr>

<tr>
<td><td><td>
</tr>

<tr>
<td><td><td>
</tr>

<tr>
<td><td><td>
</tr>

what should be inside the td

 $('#output').append(

              + '<td>'
              + '<ul class="listing" style="margin:0 8px 0 0;width:220px;">'
              + '<li class="item">'
              + '<dl>'
              + '<dt><a href="' + pathname + value.SLink + '" >' + value.CName.replace("(Or Similar)", "") + '</a>' + '</dt>'
              + '<dd>fr £' + parseFloat(value.CPrice).toFixed(0) + '</dd>'
              + '<dd class="last">' + value.CType + ', ' + value.CSize + '<br>'
              + ' Ad: ' + value.Ad
              + ', Chi: ' + value.Chi + '<br>'
              + ' Lu: ' + value.Big + ' Big, '
              + value.Lu + ' Small'                 
              + '</dd>'
              + '</dl>'
              + '</li>'
              + '</ul>'
              + '</td>'

                     );

I don't see 4 DIV's among the contents of the TD.. ?

Šime Vidas
– Šime Vidas

2011-11-22 12:57:06 +00:00
Commented Nov 22, 2011 at 12:57 — Šime Vidas
– Šime Vidas, Commented Nov 22, 2011 at 12:57

Martin. · Accepted Answer · 2011-11-22 12:55:18Z

5

Simple nested loop:

var content;
for (var i = 1; i<= 5; $i++){
    content += '<tr>';

    for (var j = 1; j<= 3; j++){
        content+= '<td><ul class="listing" style="margin:0 8px 0 0;width:220px;">'
          + '<li class="item">'
          + '<dl>'
          + '<dt><a href="' + pathname + value.SLink + '" >' + value.CName.replace("(Or Similar)", "") + '</a>' + '</dt>'
          + '<dd>fr £' + parseFloat(value.CPrice).toFixed(0) + '</dd>'
          + '<dd class="last">' + value.CType + ', ' + value.CSize + '<br>'
          + ' Ad: ' + value.Ad
          + ', Chi: ' + value.Chi + '<br>'
          + ' Lu: ' + value.Big + ' Big, '
          + value.Lu + ' Small'                 
          + '</dd>'
          + '</dl>'
          + '</li>'
          + '</ul>'
          + '</td>';
    }
    content += '</tr>';
}
$("body").append(content);

edited Nov 22, 2011 at 12:55

answered Nov 22, 2011 at 12:37

Martin.

10.5k3 gold badges45 silver badges69 bronze badges

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

4 Comments

Ivan Over a year ago

That will not work. jQuery will automatically close your first <tr> right after it was created and will add all <td>s directly to the body

Ali Hasan Over a year ago

$("body").append('<td></td>'); how to add dynamic div inside the td tag like div

Martin. Over a year ago

@Al25 concatenation. '<td>'+dynamicDiv+'</td>'

Ivan Over a year ago

@Martin uplovoted, but change the last line to $("body").append(content)

Ivan · Accepted Answer · 2011-11-22 13:05:22Z

1

$(document).ready(function(){
    table = $('<table>');
    for (var i =0; i<5; i++){
      var tr = $('<tr>');
      for (var j =0; j<3;j++){
        var td = $('<td>');
        $(td).append('<span>All your html code for TD goes here</span>');
        $(td).appendTo(tr);
      }
      $(tr).appendTo(table);
    }
    $(table).appendTo('body');
});

jsFiddle

edited Nov 22, 2011 at 13:05

answered Nov 22, 2011 at 12:50

Ivan

3,66720 silver badges25 bronze badges

Comments

erimerturk · Accepted Answer · 2011-11-22 12:43:01Z

0

function consTrTd (elementId, trCount, tdCount){
    for(var i = 0; i < trCount; i++){

     var ttr = $("<tr>").appendTo("#"+elementId);
        for(var j = 0; j < tdCount; j++ )
             ttr.append("<td>");
    }
}

consTrTd(1,5,3);

answered Nov 22, 2011 at 12:43

erimerturk

4,28827 silver badges25 bronze badges

Collectives™ on Stack Overflow

Jquery How to build dynamic html

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related