0

追加/削除ボタンのあるテーブルがあり、これらのボタンはテーブルに行を追加および削除します。ボタンも新しい行ごとに追加されます

ここに私がhtmlとして持っているもの

<table>
<tr>
   <th>catalogue</th>
   <th>date</th>
   <th>add</th>
   <th>remove</th>
</tr>
<- target row ->
<tr id="cat_row">
   <td>something</td>
   <td>something</td>
   <td><input id="Add" type="button" value="Add" /></td>
   <td><input id="Remove" type="button" value="Remove" /></td>
</tr>
</- target row ->
</table>

JavaScript:

$("#Add").click(function() {
         $('#cat_row').after('<- target row with ->'); // this is only a notation to prevent repeatation
         id++;
});

$("#Remove").click(function() {
         $('#cat_'+id+'_row').remove();
         id--;
});

新しい行を追加するたびに、idたとえばここで「追加」ボタンを1 回クリックすると変更されることに注意してください。

<table>
<tr>
   <th>catalogue</th>
   <th>date</th>
   <th>add</th>
   <th>remove</th>
</tr>
<tr id="cat_row">
   <td>something</td>
   <td>something</td>
   <td><input id="Add" type="button" value="Add" /></td>
   <td><input id="Remove" type="button" value="Remove" /></td>
</tr>
<tr id="cat_1_row">
   <td>something</td>
   <td>something</td>
   <td><input id="Add" type="button" value="Add" /></td>
   <td><input id="Remove" type="button" value="Remove" /></td>
</tr>
</table>

新しく追加されたボタンにはアクションがありません。常に元のボタンをクリックする必要があります-追加/削除

この後、削除ボタンがクリックされた行のみを削除するようにしたいたとえば、行2のボタンをクリックすると、行2が削除されます

情報: 私は web2py 2.2.1 を Python 2.7 と jQuery の最新バージョンで使用しています。

4

2 に答える 2

3

同じボタンを 2 つ持つことはできませんid(「追加」と「削除」の両方に重複を使用しています)。id値はページ上で一意である必要があります。

代わりにクラスを使用したり、イベント委任も検討したりできます。たとえば、これがページ上の唯一のテーブルであると仮定すると (そうでない場合は、セレクターをより具体的にします)、値の代わりにクラス「add-btn」および「remove-btn」を持つようにボタンを変更すると、次のidことができます。使用delegate:

$("table").delegate(".add-btn", "click", function() {
    // An add button was pressed, you can find out which
    // row like this:
    var row = $(this).closest('tr');
});

.remove-btn...ボタンについても同様です。

別の方法として、次の使用を好む人もいますon(引数の順序が若干異なることに注意してください)。

$("table").on("click", ".add-btn", function() {
    // An add button was pressed, you can find out which
    // row like this:
    var row = $(this).closest('tr');
});

どちらを使用するかは、現在のスタイルの問題です。私は明確にすることを好みdelegateますが、jQuery チームは関数を過負荷にするのが大好きです。これまでのところ、廃止されていませんdelegateが、「優先」と呼ばれています。

于 2012-11-19T11:24:15.860 に答える
3

代わりに次のほうがよいと思います。

$('#cat_'+id+_row').remove();

onclick イベントでこれを行います。

$(this).parent().parent().remove();
于 2012-11-19T11:25:58.250 に答える