CODEWITHSUNDEEP
jquery
Ali Hasan
Ali Hasan

Reputation: 1075

Jquery How to build dynamic html

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>'

                     );

Upvotes: 2

Views: 3035

Answers (3)

Ivan
Ivan

Reputation: 3645

$(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

Upvotes: 1

Martin.
Martin.

Reputation: 10529

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);

Upvotes: 5

erimerturk
erimerturk

Reputation: 4288

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);

Upvotes: 0

Related Questions