Jquery Ajaxはテーブルとデータベースの行を削除します

Question

私は、mysqlテーブルの値で塗りつぶされたhtmlテーブルを持っています。この方法：

function getCategories(){ 
    $prod = new C_Product(); 
    $cat= $prod->getCategorieenAsArray(); 

    $tr = ""; 
    foreach ($cat as $key => $value){ 
     $tr.="<tr><td>&nbsp;</td><td>$value</td><td><img src=\"images/delete_button.gif\"></td></tr>\n"; 

    } 
    return $tr; 

} 

は今、私は私がデータベースからその行を削除するには、それが実際にhtmlページ上の表からも削除されますようにテーブルを更新するには、削除ボタンを押したときにできるようにしたいです。私はこのjQueryとAjaxに使いたいです。それは私にとっては難しいことではありません。私の質問は、削除される行を選択する方法ですか？ jqueryはどのimgが押されているかをどのように知るでしょうか？

img/trにクラスを追加する必要がありますか？私がIDを使用する場合は、追加されている各行に対してjquery関数を再定義する必要があり、正しい解決策ではないようです。

だから誰でも私をさらに助けてくれますか？

おかげ

//編集：私はフィギュアのものを試して自分の道を行き、私は今、正しいIDとの完全なAJAX呼び出しを持っている平均時間で

を。

jQuery(document).ready(function(){ 

    jQuery("img.deleterow").click(function(){ 
     id = jQuery(this).parent().attr("id"); 
     jQuery.ajax({ 
      type: "POST", 
      data: "id=" +id, 
      url: "ajax_handler.php", 
      success: function(msg){ 
       jQuery(this).parent().remove(); 
      } 
     }); 

    }); 
}); 

ここで唯一の問題は、データベース内のIDが削除されたときにテーブルからtrを削除することです。 これは私のtrがどのように見えるかです：

$tr.="<tr><td>&nbsp;</td><td>$value</td><td id=\"$key\"><img class=\"deleterow\" src=\"images/delete_button.gif\"></td></tr>\n"; 

Answer 1

私はよっぽどIMGまたはTRにクラスを追加すると、データベース

に要素のIDを持っているIDを追加するだろうが、そうでない場合には、この

ようsomethngだろうYOUR編集する

$('img').click(function(){ 
    var id = $(this ~ tr).attr("id"); 
    $.ajax(type: "POST", 
      url: "some.php", 
      data: "id="+id, 
      success: function(msg){ 
      $(id).remove(); 
    }); 
}); 

EDIT：

は、あなたがそれを削除する$（ "＃ID〜TR"）セレクタを試してみましたか？例えば$(#id ~ tr).remove();

私はまた、あなたがIDを追加する場合、それは、TR

Answer 2

通常、私はその目的のためにリンクの代わりに、純粋に画像を使用します。それが意味的に正しいですので：

、その後

$（ "deleteButton。 "）をクリックします（関数（）{ VAR DeleteIdは= $（この）.ATTR（" HREF"）。サブストリング（10）; // AjaxまたはUR1コールなど }）; （画像の交換のような）を処理するためにCSSに任意のスタイリングルールを

<a href="..." class="...">Delete this row</a> 

と去る：

さらに一歩、私も同じようなものを入れて、A内の任意の画像を入れていないだろう。

Answer 3

このquestionを参照してくださいを取り除くために$('#id').remove();だろうTRにIDを入れてしまうでしょう。これは、テーブルセルの行と列のインデックスを取得するのに役立ちます。次に、Ajaxを呼び出してデータベースから項目を削除します。成功コールバックでは、標準jQueryアクションを使用してテーブルから行を削除します。 Ajaxコールの進行中に、htmlページへのアクセスをブロックすることができます。これにより、ユーザーは別の画像をクリックできなくなります。

Answer 4

この問題に関するあなたの直感は正しい方向にありました。各レコードのデータベースIDを渡し、HTMLのどこかに格納して、バックエンドに渡す値を知る必要があります。 JavaScriptを使用しないユーザー（通常は良いアイデア）のために正常に機能しないソリューションを実装する予定がある場合は、単一の行を削除する非Ajaxビューを実装します。アプリケーションでpretty URLsが使用されている場合、そのビューには/ table/delete/23（または任意のid）でアクセスできます。あなたのテーブル生成コードでは、次のようになり、各列のリンクを追加したい：この時点で

<a class="delete-button" href="/table/delete/23">Delete</a> 

を、あなたはうまく働い非javascriptのソリューションを持っている必要があります。これでAJAXを追加できます。このスクリプトでは、hrefの最後の部分を抽出してidに変換するために、javascript文字列マングリングを使用しています。あなたはAJAX要求を受け入れるように、バックエンドのPHPの機能を実装しているとき

$(".delete-button").click(function() { 
    var id = this.href.slice(this.href.lastIndexOf('/')+1); 
    // perform AJAX call using this id 
    return false; // return false so that we don't follow the link! 
}); 

はまた、sanitize your inputすることを忘れないでください！