Jquery的如何構建動態HTML

我想要動態地創建5個TR內對於每個具有3個TDS與一個循環，請注意：內部的每個我正在填充其具有從陣列Jquery的如何構建動態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>

填充動態值動態HTML 應該是什麼樣的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>' 

        );

來源

2011-11-22 Ali Hasan

我沒有看到4 DIV的對TD的含量中..？ –

簡單的嵌套循環：

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

來源

2011-11-22 12:37:22

這是行不通的。 jQuery將在創建後自動關閉你的第一個，並將所有的直接添加到主體 – Ivan

$（「body」）。append（''）; 如何在td標籤內添加動態div，如div –

@ Al25串聯。 '''+ dynamicDiv +''' –

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

來源

2011-11-22 12:43:01 erimerturk

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

來源

2011-11-22 12:50:57 Ivan

Jquery的如何構建動態HTML

回答

相關問題