Jquery如何构建动态html

Question

我想动态创建 5 个 tr，每个 tr 有 3 个带循环的 td，注意:在每个 tr 内，我填充动态 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);