0

我遇到的问题是，当我尝试通过 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>
4

2 回答 2

3

您不能使用 . append(). 您必须添加完整的 HTML 片段。这条线$('#catalog').append("<table><tr><th>Part #</th><th>Delete</th></tr>");是一个真正的问题，因为它只是一段有效的 HTML 并且本身是无效的。

您可以做的是在循环中累积部分 HTML 字符串，然后将完成的字符串一次附加到最后的 DOM。

或者，您可以为表格添加完整的 HTML，但没有行，然后在循环中一次插入一个完整的行。

你不能做的是 append <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);

}
于 2012-05-16T19:19:22.840 回答
1

你在做什么是错误的。.append不能那样工作。您需要在 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-16T19:22:37.913 回答