Question

我想动态创建5 tr，每个都有3个带循环的tds，注意：在每个内部我填充动态html，其中包含从数组中填充的动态值

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

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

                     );

Answer 1

简单的嵌套循环：

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

Answer 2

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

Answer 3

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

Jquery如何构建动态html

3 个答案: