Question

我有一个空div：

<div id="productlist" class="productlist" style="float:left;"> </div>

我将表格附加在：

$parent = $("#productlist").empty();
$parent.append('<table id="myTable" cellpadding="0" cellspacing="0" width="100%" class="productlist"><tbody>');

我尝试在其中添加行和列：

$("#myTable > tbody").append('<br />');
$("#myTable > tbody").append('<tr align="center"><td align="center" id="colunm-product"><div id="brand-item"><a href="#" class="brand_id">Image here.</a></div>');
$("#myTable > tbody").append('<div class="newproduct" id="newproduct"><a href="#">New product.</a></div>');
$("#myTable > tbody").append('<div id="product_image"><a href="#" style="text-decoration:none">My image</a></div>');
$("#myTable > tbody").append('</td></tr></table>');

但我认为结果是：

 <table id="myTable" class="productlist" width="100%" cellspacing="0" cellpadding="0" style="margin-left: 4px; padding-top: 2px;">
  <tbody>
    <br />
    <tr align="center">
       <td align="center" id="colunm-product">
           <div id="brand-item">
             <a href="#" class="brand_id">
                Image here.
             </a>
           </div>
       </td></tr>

       <div class="newproduct" id="newproduct"><a href="#">New product.</a></div>
       <div id="product_image"><a href="#" style="text-decoration:none">My image</a>
       </div>
 </table>

td中只有一个div。其他2 div怎么样，为什么他们不在那个td？谁能告诉我，我怎么能这样做？

谢谢你。

Answer 1

那是因为你实际上是将div添加到tbody元素，而不是td。

您可能想要创建一个td元素，将div添加到td，然后将td添加到tbody。

$("#myTable > tbody").append('<br />');
var td  = $("<td align="center" id="colunm-product"></td>");
td.append("<div id="brand-item"><a href="#" class="brand_id">Image here.</a></div>");
td.append('<div class="newproduct" id="newproduct"><a href="#">New product.</a></div>');
td.append('<div id="product_image"><a href="#" style="text-decoration:none">My image</a></div>');
var tr = $('<tr align="center"></tr>');
tr.append(td);
$("#myTable > tbody").append(tr);

Answer 2

不要多次调用append方法。将字符串存储在变量中并仅调用一次

 var strRow='<tr align="center"><td align="center" id="colunm-product"><div id="brand-item"><a href="#" class="brand_id">Image here.</a></div>';
 strRow+='<div class="newproduct" id="newproduct"><a href="#">New product.</a></div>';
 strRow+='<div id="product_image"><a href="#" style="text-decoration:none">My image</a></div>';
 strRow+='</td></tr>';
 $("#myTable > tbody").append(strRow);

示例：http://jsfiddle.net/srrht/6/

Answer 3

样品：http://jsfiddle.net/Q2WzA/

$parent = $("#productlist").html('');
$parent.append('<table id="myTable" cellpadding="0" cellspacing="0" width="100%" class="productlist"><tbody>');



var $table = $parent.find("#myTable > tbody");



var htmlRow = [
    '<tr align="center">',
     '<td align="center" id="colunm-product">',
      '<div id="brand-item"><a href="#" class="brand_id">Image here.</a></div>',
      '<div class="newproduct" id="newproduct"><a href="#">New product.</a></div>',
      '<div id="product_image"><a href="#" style="text-decoration:none">My image</a></div>',
     '</td>',
    '</tr>'];

$table.append(htmlRow.join(''));

使用Jquery将元素附加到表

3 个答案: