0

我使用 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>

我在 document.ready 中调用该函数。但结果在我看来是出乎意料的：

 <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>

我不知道为什么<br><br>桌子上有。如何避免这个问题？

谢谢。

4

1 回答 1

1

您试图插入 DOM，就好像您在文本编辑器中编写 html 一样，这是错误的方法。您插入的任何元素都是完整的元素，并且已经“关闭”。您不能插入表格的开始 html，添加一些行，然后添加结束标签……就像您编写它一样。

当您使用 jQuery 插入一个空表作为示例时，有几种编写标签的方法：

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

所有 3 产生相同的东西......一个完整的表 DOM 节点。这个表已经被关闭了，因为我们认为它带有 html 标签，并且在 IE 的情况下，可能还有其他浏览器，它也有一个 tbody。将其视为 html 的顶部和底部都已到位。

现在当我们追加内部元素时，它们也需要是完整的。

表格示例是单个标签，一次插入多个标签需要有效的封闭 html，因为我们在编辑器中知道它。

$('') 不起作用，在这种情况下，两个标签都需要按正确的顺序关闭。类似地，我们不会像您尝试的那样附加许多行，然后尝试为 tbody 和 table 添加结束标签。

我相信这应该让您更好地了解如何调整代码，使其不至于支离破碎。

尝试插入碎片代码会产生不必要的行为，甚至可能会被拒绝

于 2012-06-26T03:30:31.263 回答