Question

我为数据库中的每条记录生成以下内容

$allbills = mysql_query("SELECT * FROM outgoings WHERE outgoings.user_id = '$uid'") or die(mysql_error()); 

        echo "<table>";
        while($info = mysql_fetch_array( $allbills )) 
         { 
         echo "<tr>"; 
         echo "<th>bill id:</th> <td>".$info['id'] . "</td> ";
         echo "<th>total:</th> <td>".$info['bill'] . "</td> ";
         echo "<th>bill name:</th> <td>".$info['bill_name'] . "</td> ";
         echo "<th>bill deposit:</th> <td>".$info['bill_description'] . "</td> "; 
         echo "<th>colour:</th> <td>".$info['bill_colour'] . " </td>"; 
         echo "<th>edit:</th> <td>

         <form class='bill-upd'>
             <input type='hidden' value='".$info['rand']."' name='rand2' id='rand2'>
             <input type='hidden' value='".$info['id']."' name='billid' id='billid'>
            Total <input type='text' id='total' name='total' /><br />
            Bill name<input type='text' id='bill-name' name='bill-name' /><br />
           bill descriptiion <input type='text' id='bill-description' name='bill-description' /><br />
            bill colour<input type='text' id='bill-colour' name='bill-colour' />
        <input type='button' value='submit' class='bill-upd-submit' />
        </form>   

         </td>"; 
         echo "</tr>";
         }
         echo "</table>";

这使用AJAX

更新我在桌面上的用户记录

$(document).ready(function(){   
    $(".bill-upd-submit").click(function() {
        var elem = $(this);
        $.post('update_bill.php', elem.parent('.bill-upd').serialize(), function(data) {
            elem.append(data);
        });
    });
});

一旦完成此操作，用户需要刷新页面才能看到结果，是否有一种方法可以填充用户编辑的表格，并在更新查询发生后使用最新数据？

Answer 1

我会尝试不同的方法：

1）在按钮后面添加一个不可见的div。您可以动态执行此操作：

$(document).ready(function() {
   $(".bill-upd-submit").after("<div style='display:none'></div>");
    // ...
});

2）现在您的帖子活动如下：

 $(".bill-upd-submit").click(function() {
      var elem = $(this);
      $.post("update_bill.php", elem.parent(".bill-upd").serialize(), function(data) {
            elem.next("div").html(data);
      });
});

顺便说一句，我假设同一页面中还有其他按钮，这就是使用class（bill-upd-submit）而不是id的原因。如果只有一个按钮，则ID更快。另外，我认为bill-upd-submit是按钮类型。如果是提交类型，我会将其更改为按钮或将以下内容添加到click事件中：

function() {
    // ... the code shown above
    return false;
});

这会阻止表单的提交发生。

Answer 2

在我看来，您当前的javascript正在尝试附加表单，而不是表格。如果您尝试在底部的表中添加一行并保留所有其他行，那么这可能会有效。在html标记中给你的表一个ID（这里我使用“table_id”）：

     $(".bill-upd-submit").click(function() {
         $.post("update_bill.php", elem.parent(".bill-upd").serialize(), function(data){
         $("#table_id tr:last").after(data);             
         });
     });

并确保您的php文件（update_bill.php）内置了相应的html，以便为您回显适当的tr。

AJAX返回，页面上更新表

2 个答案: