Question

我创建了一个包含动态表单的表，因此当单击时，添加按钮将显示每行具有相同表单的新行。而且我也已经开始清理表格了，但是进展不顺利。任何事情，因为动作中有其他功能来删除该行。我做了以下编码。

HTML：

<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: 280px;" 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: 280px;" class="nama-jenis-makanan" placeholder="nama jenis makanan"/>
            </td>
            <td>
                <input type="text" readonly name="harga-makanan[]" rel="hargaMakanan" style="height: 30px; width: 280px; text-align: right;" class="harga-makanan" placeholder="harga satuan makanan"/>
            </td>
            <td>
                <a class="btn hapus-baris-makanan" style="display: none;"><i class="icon-remove"></i></a>
            </td>
        </tr>
    </tbody>
</table>
<button class="btn btn-primary tombol-tambah-makanan" type="button" style="float: right; margin-right: 10px;">Tambah</button>

javascript for dynamic form：

$('.tombol-tambah-makanan').on('click', function(){
    var tr = '<tr>\n\
                <td><input type="text" name="nama-makanan[]" style="height: 30px; width: 280px;" 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: 280px;" class="nama-jenis-makanan" placeholder="nama jenis makanan"/></td>\n\
                <td><input type="text" readonly name="harga-makanan[]" rel="hargaMakanan" style="height: 30px; width: 280px; text-align: right;" class="harga-makanan" placeholder="harga satuan makanan"/></td>\n\
                <td><a class="btn hapus-baris-makanan"><i class="icon-remove"></i></a></td>\n\
            </tr>';
    $("table.tabel-form-makanan tbody").append(tr);                  
});

javascript for delete form：

$('.tabel-form-makanan').on( 'click', '.hapus-baris-makanan', function(){
    var parent = $(this).parents('tr');
    var harga = $('.harga-makanan', parent).val();
    pengurangan_pesanan(harga);
    $(this).closest('tr').remove();
});

其他javascript：

function pengurangan_pesanan(price) {
        if (subtotal > 0) {
            var kembali = 0;
            subtotal -= parseFloat(price);
            $('.subtotal').val(subtotal);
            if (cek_bayar != isNaN || cek_bayar != 0) {
                kembali = cek_bayar - subtotal;
                $('.kembali').val(kembali);
            }
        }
}

你有解决这个问题的方法，我真的需要它。谢谢

* demo：http://jsfiddle.net/daniwarrior/ANfFe/1/

行删除功能不能正常工作

0 个答案: