Question

我遇到的问题是，当我尝试通过javascript创建表时，它会在我实际给出结束标记之前关闭表。

我正在使用此解决方案来记录/读取cookie https://stackoverflow.com/a/1960049

我需要的是从这个“数组”的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

您无法使用。append()添加部分格式错误的HTML片段。您必须添加完整形式的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);

}

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.

如何防止javascript在for循环中破坏我的表？

2 个答案: