2012-02-27 14 views
1

的末尾添加表TR我有jQuery代碼,增加了一個表的最後<tr>像這樣的迴應:jQuery的AJAX在表

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或其他東西?

+0

http://stackoverflow.com/questions/171027/add-table-row-in-jquery – 2012-12-03 21:17:02

回答

2

有插入一個全新的行的方式,但你要記住隱式插入<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); 
0

你應該跟蹤如果最後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'); 
} 
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); 
0

這應該工作:

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/