1

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

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：

$('.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：

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

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

*演示：http: //jsfiddle.net/daniwarrior/ANfFe/1/

4

0 回答 0