如何讓JavaScript不會在for循環中破壞我的表？

我遇到的問題是，當我嘗試通過JavaScript創建表時，它會在實際給出結束標記之前關閉表。如何讓JavaScript不會在for循環中破壞我的表？

我使用這個解決方案來記錄/讀取cookies https://stackoverflow.com/a/1960049

我需要的是從這個餅乾的「陣列」做一個心願，通過他們全部循環，並把它們插入一個表格什麼。（#catalog div內）

function loopArray() { 
     var cookie = $.cookie("testCookie"); 
     var items = cookie ? cookie.split(/,/) : new Array(); 


    $('#catalog').empty(); 
    $('#catalog').append("<table><tr><th>Part #</th><th>Delete</th></tr>"); 

    for(var i=0;i<items.length;i++){ 
     $('#catalog').append("<tr><td width='150'>"+items[i]+"</td><td><a href='javascript:;' onclick='remNum("+i+")'><img src='searchAssets/img/delete.png' /></a></td></tr>"); 
    } 

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

}

不知道爲什麼這不起作用。試圖用innerHTML作弊，但這給了我一些問題，我嘗試使用document.write，但是當使用remNum函數刪除cookie值並刷新列表時，它完全擦除了整個頁面。

這就是我的表最終看起來，當我拿出代碼

<table><tbody><tr><th>Part #</th><th>Delete</th></tr></tbody></table><tr><td width="150">three</td><td><a href="javascript:;" onclick="remNum(0)"><img src="searchAssets/img/delete.png"></a></td></tr>

來源

2012-05-16 Jweb

你不能添加HTML的偏誤形成的塊等。 append()。你必須添加完整的HTML部分。這條線$('#catalog').append("<table><tr><th>Part #</th><th>Delete</th></tr>");是一個真正的問題，因爲它只是一個有效的HTML片段，並且本身無效。

你可以做的是在你的循環中累積部分HTML的字符串，並在最後將完成的字符串追加到DOM一次。

或者，您可以爲表格添加完全形成的HTML，但不包含行，然後在循環中一次插入一行。

你不能做的是追加<table>，然後一些行，然後在末尾追加</table>。 append創建整個HTML對象，所以附加<table>會挑戰瀏覽器使整個對象脫離或拒絕整個事物。

例如，你可以做這樣的：

function loopArray() { 
    var cookie = $.cookie("testCookie"); 
    var items = cookie ? cookie.split(/,/) : new Array(); 
    var html = "<table><tr><th>Part #</th><th>Delete</th></tr>"; 

    for(var i=0;i<items.length;i++){ 
    html += "<tr><td width='150'>"+items[i]+"</td><td><a href='javascript:;' onclick='remNum("+i+")'><img src='searchAssets/img/delete.png' /></a></td></tr>"; 
    } 
    html += "</table>"; 
    $('#catalog').html(html); 

}

來源

2012-05-16 19:19:22 jfriend00

你在做什麼是錯的。 .append不會那樣工作。您需要添加完整的標籤，而不是部分內容。

在你的情況下，我會建議你把它們作爲一個字符串，並將其追加到最後。見下文，

$('#catalog').empty(); 
var tableContent = []; 

tableContent.push("<table><tr><th>Part #</th><th>Delete</th></tr>"); 

for(var i=0;i<items.length;i++){ 
    tableContent.push("<tr><td width='150'>"+items[i]+"</td><td><a href='javascript:;' onclick='remNum("+i+")'><img src='searchAssets/img/delete.png' /></a></td></tr>"); 
} 

tableContent.push("</table>"); 

$('#catalog').html(tableContent.join('')); //using .html as you had it emptied earlier.

來源

2012-05-16 19:22:37

如何讓JavaScript不會在for循環中破壞我的表？

回答

相關問題