0

空のdivが1つあります：

<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が1つだけあります。他の2divはどうですか、なぜそれらはそのtdにないのですか？誰か教えてもらえますか、どうすればいいですか？

ありがとうございます。

4

3 に答える 3

1

これは、td ではなく tbody 要素に実際に div を追加しているためです。

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 に答える