渲染的HTML代码通过jquery发出的问题

时间:2014-08-13 18:52:50

标签: javascript jquery html css

我有以下HTML代码:

<div id="contentProductDetails" style="display:none;">
      <table align="center" width="100%" cellpadding="1" cellspacing="2" class="table-responsive">
        <tr>
          <th>ItemName</th>
          <th>Qty</th>
          <th>Tracking Number</th>
          <th>Discount Offered</th>
          <th>Unit Price</th>
          <th>Unit Cost</th>
          <th>Profit</th>
          <th>Category</th>
          <th>Supplier Name</th>
        </tr>
        <tbody>
                <div class="adddynamicdata"></div>
        </tbody>
      </table>
    </div>

在tbody中,我有一个动态div,显示trtd中的数据。

问题是div在我试图显示它的地方出现在顶部:

这是我的ajax

$("#findproduct").bind('keydown change focusout blur', function(e) {
        $('#loading').show().html('Loading...');
        var data = $('#findproduct').val();
        $.ajax({
            url: "findproduct.cfm?term="+data,
            data: data,
            success: function (msg) {
                $("#contentProductDetails").css('display','block');
                $('.adddynamicdata').append(msg);
                $('#loading').hide(); 
            }
        });
    });

1 个答案:

答案 0 :(得分:2)

<div class="adddynamicdata"></div>

不是表格的一部分..因此它将显示在表格之外..

如果您的动态数据是简单文字,请使用此

 <tbody>
    <tr><td class="adddynamicdata"></td></tr>
 </tbody>

或者如果您的数据是tableRows,那么请使用此

 <tbody class="adddynamicdata">

 </tbody>