Question

I create one table by using jquery :

 <div class="productlist" style="float:left;" id="productlist">
 <script type="text/javascript" language="javascript">
    function loadMore() {
       var $parent = $("#productlist").empty();
       $parent.append('<table id="myTable" cellpadding="0" cellspacing="0" width="100%" class="productlist" style="margin-left:4px; padding-top:2px;"><tbody>');
       var $table = $parent.find("#myTable > tbody");
       var htmlRow = [
                     '<tr align="center">',
                     '<td align="center" id="colunm-product">',
                     '<br />',
                     '<div id="brand-item"><a href="#" class="brand_id"><img src="' + value.BrandImage + '" width = "85px"/></a></div>',
                     '<div id="product_image"><a href="'+'<%: Url.Content("~/") %>' +'Products/ProductSpec/' + value.ID +'?dep='+ value.DepartmentID +'&cat='+value.CategoryID+'&tab=2" style="text-decoration:none"><img src="' + value.PictureName + '" alt="Product" width="135px"/></a></div>',
                     '</td>',
                     '</tr>'
                      ];
      $table.append(htmlRow.join(''));
      $("#myTable > tbody").append('</tbody></table>');
   }
  </script>

And I call the function in document.ready. But the result is unexpected in my view:

 <table id="myTable" cellpadding="0" cellspacing="0" width="100%" class="productlist" style="margin-left:4px; padding-top:2px;">
    <tbody>
      <br/><br/>
      <tr> my data </tr>
    </tbody></table>

I don’t know why there are <br><br> in the table. How to avoid that problem?

Thanks.

Answer 1

You are trying to insert into the DOM as if you are writing html in a text editor, and it’s the wrong approach. Any element you insert is a complete element and it is already “closed”. You can’t insert the beginning html of a table, add some rows and then add closing tags…as you would write it.

WHen you insert an empty table as example with jQuery , there are several ways to write the tag:

 $('<table>') 
 $('<table/>')
 $('<table></table>') // skipping over tbody issues for now

All 3 produce the same thing… a complete table DOM node. This table already has already been closed, as we think of it with html tags, and in the case of IE for certain, and possibly other browsers, it has a tbody as well. Think of it as the top and bottom of the html are in place.

Now when we append internal elements, they also need to be complete.

The table example was a single tag, inserting mulitple tags at one time require valid closed html as we knwow it in an editor.

$(”) doesn’t work, in this case both tags need closing in proper order. Simiarly we don’t append a nummber of rows and then try to throw in closing tags for tbody and table as you have tried.

I believe this should give you a better understanding on how to adjust your code so that it isn’t fragmented.

Inserting fragmented code as you’ve tried will produce unwanted beahvior and even possible rejection