如何使用jQuery Ajax更新表格行？

Question

我有一个表格，其中包含两个用户可以选择批准或拒绝的按钮。我正在使用jQuery .post（）方法来更新一个MySQL数据库与这个信息，它都可以正常工作。目前PHP只是回应文本回应。

现在我想使用ajax刷新按钮被点击后的新信息表中的状态字段。我不确定最好的方式去做这件事。应该从服务器端使用jQuery .get（）获取表，还是只需更新状态字段？

表

**Username Status    Change Status** 
Anderson no   (decline button) (Add button) 
julian  yes   (decline button) (Add button) 

jQuery的

$(document).ready(function() { 
$("#myForm2").submit(function(e) { //If add btn pressed 
    e.preventDefault(); 
    var id = this.id; 


    var url = "process_ajax6.php"; 

    var formdata = $(this).serialize(); 
    formdata += "&btn=btn_add"; // added the btn 
    $.post(url, formdata, 
     function(data) { 

      $("#results").html(data); //Response 

     }); 
}); 

$("#myForm1").submit(function(e) { //If add btn pressed 
    e.preventDefault(); 
    var id = this.id; 
    var url = "process_ajax6.php"; 

    var formdata = $(this).serialize(); 
    formdata += "&btn=btn_remove"; // added the btn 
    $.post(url, formdata, 
     function(data) { 

      $("#results").html(data); //Response 
     }); 
    }); 

}); 

HTML表格和形式

echo "<tr> 
<td> 
<a href=\"profile.php?user_id=".$collab_userid." \" 
<span class=\"label label-default\" id=\"tag\">".$collab_username."</span></a> 
</td> 
<td> 
".$status." 
</td> 

<td> 
<form id=\"myForm1\" class=\"myForm1\" action=\"\" method=\"post\" enctype=\"multipart/form-data\"> 
<input type=\"hidden\" name=\"user_id\" value=". $collab_userid." /> 
<input type=\"hidden\" name=\"id\" value=".$upload_id." /> 

    <button type=\"submit\" id=\"btn_remove\" class=\"btn_remove\" name= \"btn_remove\">Remove</button> 

</form> 
</td> 
<td> 
<form id=\"myForm2\" class=\"myForm2\" action=\"\" method=\"post\" enctype=\"multipart/form-data\"> 
<input type=\"hidden\" name=\"user_id\" value=". $collab_userid." /> 
<input type=\"hidden\" name=\"id\" value=".$upload_id." /> 

    <button type=\"submit\" id=\"btn_add\" class=\"btn_add\" name= \"btn_add\">Add</button> 

</form> 
</td> 

</tr>"; 

} 
"</tbody> 
</table>"; 

在PHP

if ($btn=="btn_add") { 
$status="yes"; 

$stmt = $db_conx->prepare('UPDATE tbl_collab SET approved=? WHERE collab_userid=? AND tbl_upload_id=?'); 
$stmt->bind_param('sss',$status,$user_id,$id); 
$stmt->execute(); 
if($stmt){ 



     echo "<p>user approved</p>"; 


} 
} 
    elseif ($btn=="btn_remove"){ 

$status="no"; 

$stmt = $db_conx->prepare('UPDATE tbl_collab SET approved=? WHERE collab_userid=? AND tbl_upload_id=?'); 
$stmt->bind_param('sss',$status,$user_id,$id); 
$stmt->execute(); 
if($stmt){ 

    echo "<h1>user declined</h1>"; 


} 
} 

Answer 1

设置ID为您的状态字段的表像这样：

<td id='status_1'> 
".$status." 
</td> 

当你的PHP代码输入反应就像你说的一些文字，只需更改状态字段的html值是这样的：

$.post(url, formdata, 
    function(data) { 
     $("#status_1").html('Yes'); //Response 
    }); 

}）;

Answer 2

我建议从服务器响应更新查询返回新状态，并使用它来更新$ .post回调中前端的状态。

做到这一点

最快的方法 - 就是状态添加到回复的DOM元素：

echo "<answer><h1>user declined</h1></answer><status>$status</status>; 

和$。员额回调接收到的数据的访问是这样的：

$("#results").html($(data).find('answer').html()); //Response 
$("#whatever").html($(data).find('status').html()); //Status 

你应该标记td与状态由smth访问它