1

動的フォームを使用して作成したテーブルから行を削除したいので、[追加] ボタンをクリックするとテーブルの行が自動的に増加します。テーブルから行を削除したい。行数が1行のみの場合に行を削除する場合、キーは表示されませんが、行数が複数の場合は任意の行の削除ボタンが表示されます。私はhtmlとjavascriptを作りました。

            <table class="table table-striped area-table tabel-form-makanan">
                <thead>
                    <tr>
                        <th>Nama Makanan</th>
                        <th>Jenis Makanan</th>
                        <th>Harga Makanan</th>                            
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>
                            <input type="text" name="nama-makanan[]" style="height: 30px; width: 300px;" class="nama-makanan" placeholder="ketikkan nama makanan"/>
                            <input type="hidden" name="id-makanan[]" class="id-makanan"/>
                        </td>
                        <td>
                            <input type="text" readonly name="nama-jenis-makanan[]" style="height: 30px; width: 300px;" class="nama-jenis-makanan" placeholder="nama jenis makanan"/>
                        </td>
                        <td>
                            <input type="text" readonly name="harga-makanan[]" style="height: 30px; width: 300px;" class="harga-makanan" placeholder="harga satuan makanan"/>
                        </td>
                    </tr>
                </tbody>
            </table>
            <button class="btn tombol-reset-makanan" style="float: right;">Reset</button>
            <button class="btn btn-primary tombol-tambah-makanan" type="button" style="float: right; margin-right: 10px;">Tambah</button>

そしてこのJavaScript（jquery）

    $('.tombol-tambah-makanan').on('click', function(){
        var tr = '<tr>\n\
                    <td><input type="text" name="nama-makanan[]" style="height: 30px; width: 300px;" class="nama-makanan" placeholder="ketikkan nama makanan"/><input type="hidden" name="id-makanan[]" class="id-makanan"/></td>\n\
                    <td><input type="text" readonly name="nama-jenis-makanan[]" style="height: 30px; width: 300px;" class="nama-jenis-makanan" placeholder="nama jenis makanan"/></td>\n\
                    <td><input type="text" readonly name="harga-makanan[]" style="height: 30px; width: 300px;" class="harga-makanan" placeholder="harga satuan makanan"/></td>\n\
                </tr>';
        $("table.tabel-form-makanan tbody").append(tr);                  
    });

    $('.tombol-reset-makanan').on('click', function(){
        $('table.tabel-form-makanan tbody tr:not(:first)').remove();
    });

動的フォームでテーブルの行を削除する方法は?

4

3 に答える 3

1

on()動的に追加された要素のクリック ハンドラーを委任するために使用します

$('.tabel-form-makanan').on( 'click', '.deleteButtonClass', function(){

   $(this).closest('tr').remove()
})
于 2012-12-27T04:10:18.883 に答える
-1

試す

  $(document).on('click','.deleteButtonClass', function(){
        $('table.tabel-form-makanan tbody tr:not(:first)').remove();
    });
于 2012-12-27T03:57:22.733 に答える
-1

これにより、任意の行を削除できます

http://jsfiddle.net/KRacz/

$("table.tabel-form-makanan tbody").find("button").on('click', function() {
      $(this).parent().parent().remove();
});
于 2012-12-27T04:02:05.077 に答える