jQuery AJAX 在表格末尾添加表格 tr答案

【问题标题】：jQuery AJAX adding table tr at end of tablejQuery AJAX 在表格末尾添加表格 tr
【发布时间】：2012-03-16 20:04:33
【问题描述】：

我有一个 jQuery 代码，可以像这样向表的最后一个 <tr> 添加响应：

var table = '<td>' + result.table.product + '</td><td>' + result.table.code + '</td><td>' + result.table.value + '</td><td>' + result.table.time + '</td>';
$('#poo tr:last').after(table);

这是我的桌子：

<?php

$sql="SELECT * FROM wp_scloyalty WHERE userid = '$user_id' ORDER BY date ASC";
$result=mysql_query($sql);
?> 
<table id="poo" style="margin:10px 0px 0px 0px;" width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
    <td><strong>Product</strong></td>
    <td><strong>Code</strong></td>
    <td><strong>Value</strong></td>
    <td><strong>Date Redeemed</strong></td>
</tr>
<?php while($rows=mysql_fetch_array($result)){ ?>  
<tr class="currentpoints">
    <td><? echo $rows['product']; ?></td>
    <td><? echo $rows['code']; ?></td>
    <td><? echo $rows['value']; ?></td>
    <td><? echo $rows['date']; ?></td>
</tr>  
<? } ?>
<tr class="currentpoints">
    <td id="producttd"></td>
    <td id="codetd"></td>
    <td id="valuetd"></td>
    <td id="datetd"></td>
</tr>  
</table>

我的问题是，当我添加多个条目时，它会尝试将它们全部放入最后一个 tr。有没有办法在填充最后一个 tr 后添加一个 tr 或其他东西？

【问题讨论】：

stackoverflow.com/questions/171027/add-table-row-in-jquery

标签： php jquery ajax html-table

【解决方案1】：

有一种方法可以插入一个全新的行，但是您必须记住隐式插入的<tbody 元素，因此您必须将新行插入为该元素的子元素。

var table = '<tr><td>' + result.table.product + '</td><td>' + result.table.code + '</td><td>' + result.table.value + '</td><td>' + result.table.time + '</td></tr>';

$('#poo > tbody').append( table );

【讨论】：

【解决方案2】：

在将行追加到表格时不应该添加<tr>标签吗？

var table = '<tr><td>' + result.table.product + '</td><td>' + result.table.code + '</td><td>' + result.table.value + '</td><td>' + result.table.time + '</td></tr>';
$('#poo tr:last').after(table);

【讨论】：

【解决方案3】：

这应该可行：

function test(product, code, value, time)
{
    var table = '<tr><td>' + product + '</td><td>' + code + '</td><td>' + value + '</td><td>'+ time +  '</td></tr>';

    $('#poo > tbody').append(table);
}

test('1','1','1','1');
test('2','2','2','2');

JSFiddle 输出：http://jsfiddle.net/pzewX/

【讨论】：

【解决方案4】：

你应该跟踪最后一个 tr 是否已填充

//the last tr
var $lastTr = $('#poo tr:last');
var table = '<td>' + result.table.product + '</td><td>' + result.table.code + '</td><td>' + result.table.value + '</td><td>' + result.table.time + '</td>';
//check if it has the class populated
if($lastTr.hasClass('populated')){
   //if it has it create a new row
   var tr = $('<tr/>');
   tr.append(table);
   $lastTr.after(tr);
 }else{
   //use the last row
   $lastTr.html(table);
   $lastTr.addClass('populated');
 }

【讨论】：