Question

我使用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>。如何避免这个问题？

感谢。

Answer 1

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

当您使用jQuery插入空表时，有几种方法可以编写标记：

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

所有3个产生相同的东西......一个完整的表DOM节点。这个表已经被关闭了，因为我们用html标签来思考它，对于某些IE浏览器，可能还有其他浏览器，它也有一个tbody。可以把它想象成html的顶部和底部。

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

表示例是单个标记，一次插入多个标记需要有效的封闭html，因为我们在编辑器中将其打开。

$（''）不起作用，在这种情况下，两个标签都需要以正确的顺序关闭。我们不会追加数量的行，然后尝试为tbody和table抛出结束标记。

我相信这可以让您更好地了解如何调整代码，使其不会碎片化。

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

添加jquery冗余<br/>

1 个答案: