2012-06-26 29 views
0

我通过使用jQuery创建一个表:添加<tbody>的jQuery冗余<br>

<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>。如何避免这个问题?

谢谢。

+0

你打算叫'.append我不认为()'不平衡HTML片段。我不确定它是否与您的问题有关,但我会一次添加完整的空表,然后添加行。 – recursive

回答

1

您试图插入DOM,如果你是在文本编辑器编写HTML,这是错误的做法。你插入的任何元素都是一个完整的元素,它已经“关闭”了。你不能插入表格的开始html,添加一些行,然后添加结束标签...就像你会写它。

当您插入一个空表为例使用jQuery,有几种方法来写标签:

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

所有3产生同样的事情...一个完整的表DOM节点。该表已经已经关闭,因为我们认为它与HTML标签,并在IE的某些,可能还有其他浏览器的情况下,它有一个TBODY为好。把它看作是html的顶部和底部。

现在,当我们追加内部元素时,他们也需要完整。

表的例子就是一个标签,一次插入多张标签需要有效的封闭的HTML作为我们在编辑器中knwow它。

$(“”)不工作,在这种情况下,两个标签必须按照正确的顺序关闭。同样,我们不追加行数,然后尝试抛出tbody和table的结束标记,就像您尝试过的那样。

我相信这应该给你,以便它不分散如何调整你的代码更好的理解。

插入支离破碎的代码你已经尝试会产生不必要的beahvior甚至可能拒绝

+0

现在我添加了'$ parent.append('

“); ',这是正确的吗?但我认为,每一件事都没有改变。 – Nothing

+1

是页面中现有的html有效吗?尝试删除'
'不需要在块元素之前。也不需要清空$ parent,可以使用$ parent.html(​​) – charlietfl