0

データベース内のすべてのレコードに対して生成される次のものがあります

$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);
        });
    });
});

ただし、これが完了したら、ユーザーは結果を表示するためにページを更新する必要があります。更新クエリが実行された後、ユーザーが編集するテーブルに最新のデータを入力する方法はありますか？

4

2 に答える 2

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);
      });
});

ところで、同じページに他のボタンがあると思います。それが、idの代わりにクラス（bill-upd-submit）を使用する理由です。ボタンが1つしかない場合は、idの方が高速です。また、bill-upd-submitはボタン型だと思います。タイプ送信の場合は、ボタンに変更するか、クリックイベントに以下を追加します。

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

これにより、フォームの送信が行われなくなります。

于 2012-04-21T22:12:02.460 に答える
0

あなたの現在の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をエコーし​​てください。

于 2012-04-21T22:41:11.123 に答える