如何防止javascript在for循環中破壞我的表？

Question

我遇到的問題是，當我嘗試通過javascript創建表格時，它實際上是在關閉表格之前給了結束標記。

我正在使用此解決方案來記錄/讀取Cookie https://stackoverflow.com/a/1960049

我需要的是通過循環瀏覽所有cookie並將它們放入表格中，從該cookie“數組”中創建一個願望清單。 （在#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>

Answer 1

您不能使用來添加部分格式錯誤的HTML。 append() 。 您必須添加完整格式的HTML。 這行$('#catalog').append("<table><tr><th>Part #</th><th>Delete</th></tr>"); 這是一個真正的問題，因為它只是一段有效的HTML並且本身是無效的。

您可以做的是在循環中累積部分HTML的字符串，然后將完成的字符串一次附加到DOM的末尾。

或者，您可以為表添加格式完整的HTML，但沒有行，然后一次在循環中插入完整的行。

您不能執行的操作是附加<table> ，然后添加一些行，然后在末尾附加</table> 。 append創建了整個HTML對象，因此append <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);

}

Answer 2

你在做什么錯了。 .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.