How do I keep javascript from breaking my table in a for loop?

Question

The problem I'm having is that when I try to create a table via javascript, it is closing the table before I actually give the closing tag.

I'm using this solution to record/read cookies https://stackoverflow.com/a/1960049

What I needed was to make a wishlist from this "array" of cookies, by looping through them all and putting them into a table. (inside the #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>");

}

Not sure why this won't work. Tried cheating with innerHTML but that gave me problems, and I tried using document.write but when using the remNum function to remove the cookie value and refresh the list it completely wipes my whole page out.

This is what my table ends up looking like when I take out the code

<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

You can't add partial mal-formed pieces of HTML with . append() . You have to add fully formed pieces of HTML. This line line $('#catalog').append("<table><tr><th>Part #</th><th>Delete</th></tr>"); is a real problem as it's only a piece of valid HTML and is invalid by itself.

What you can do is accumulate the string of partial HTML in your loop and just append the finished string once to the DOM at the end.

Or, you can add the fully formed HTML for the table, but with no rows and then insert a complete row at a time in your loop.

What you cannot do is append <table> , then some rows and then append </table> at the end. append creates WHOLE HTML objects so append <table> challenges the browser to make an entire object out of it or reject the whole thing.

For example, you can do it like this:

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

What you are doing is wrong. .append doesn't work that way. You need to have the complete tag inside append, not partial content.

In your case I would suggest you put them as a string and append it at the end. See below,

 $('#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.