jQuery的建表

menuOrder空白的divjQuery的建表

$("#menuOrder").append('<table>'); 

$(menus).each(function(i, menu) { 
    $("#menuOrder").append('<tr><td>'); 
    $("#menuOrder").append(menu.text); 
    $("#menuOrder").append('</td><td>'); 

    if (i > 0) { 
    $("#menuOrder").append('<img src="/images/_images/up.png" />'); 
    } else { 
    $("#menuOrder").append('<img src="/images/_images/blank.png" />'); 
    } 

    if (i < menus.length - 1) { 
    $("#menuOrder").append('<img src="/images/_images/down.png" />'); 
    } 

    $("#menuOrder").append('</td>'); 
    $("#menuOrder").append('</tr>'); 
}); 

$("#menuOrder").append('</table>');

此代碼不能正常工作，我怎麼能以最小的迭代改變呢？

來源

2010-04-26 kusanagi

這是建議，以避免很多類似這樣的.append，而不是可能的情況下，建立字符串以HTML然後追加 – 2010-04-26 21:12:47

我該怎麼辦呢？ – kusanagi 2010-04-26 21:14:37

嘗試做這樣的事情：

var rows = []; 
$(menus).each(function(i, menu) { 
var row = '<tr><td>'.menu.text.'</td><td>'; 

    if (i > 0) { 
     row +='<img src="/images/_images/up.png" />'; 
    } 
    else { 
     row +='<img src="/images/_images/blank.png" />'; 
    } 

    if (i < menus.length - 1) { 
     row +='<img src="/images/_images/down.png" />'; 
    } 

    row += '</td></tr>'; 
    rows.push(row); 
}); 
$('<table></table>').append(rows.join('')).appendTo('#menuOrder');

這充滿rows陣列包含每一行的HTML的字符串。當完成創建所有行後，它創建一個表元素的jQuery對象並將所有行添加到它。然後它將表追加到#menuOrder。

來源

2010-04-26 21:19:28 PetersenDidIt

我還會提到，最好一次添加所有行，並將它們的html存儲在一個字符串中。一些瀏覽器在處理表格的內部html部分時遇到問題 – vittore 2010-04-26 22:27:47

注意與append()你不能做到這一點：

$("#menuOrder").append('</table>');

代替HTML串片膠合在一起的，你必須考慮在完整的DOM節點的條款。爲append()的有效參數例子：

.append($('.something')) 
.append(document.createElement('div')) 
.append('<div />') // automatically creates empty div element 
.append('<tr><td></td></tr>') // automatically creates tr with td inside

來源

2010-04-26 21:29:15 jholster

回答

相關問題