0

我有一个空的 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 中？谁能告诉我，我该怎么做？

谢谢。

4

3 回答 3

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);
于 2012-05-22T03:24:24.637 回答
1

不要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/

于 2012-05-22T03:24:36.113 回答
1

示例：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(''));​
于 2012-05-22T03:30:39.530 回答