javascript – AJAX:向表中添加新行或使用AJAX删除

前端之家收集整理的这篇文章主要介绍了javascript – AJAX:向表中添加新行或使用AJAX删除前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
这是逻辑:
我输入了一些表格,表格是 AJAX实时搜索.在找到值之后,我点击“添加”按钮,它会在现有的表/ tbody中创建新行.
<table class="standard">
    <thead>
        <tr>
            <td colspan="2">
                Start Input barcode / Product Name
            </td>
            <td colspan="4">
                <input type="text" size="90" value="" placeholder="Barcode / Product Name">
            </td>
            <td>
                <button class="tambah"><i class="icon-plus"></i> Add</button>
            </td>
        </tr>

        <tr>
            <td>
                No.
            </td>
            <td>
                Kode Barang
            </td>
            <td>
                Nama Barang
            </td>
            <td>
                Qty
            </td>
            <td>
                Harga
            </td>
            <td>
                Disc %
            </td>
            <td>
                Total
            </td>
        </tr>
    </thead>
    <tbody>

    <!-- when button add is click that will add <tr></tr> here -->
    </tbody>
</table>

我能这样做吗?如果是这样,怎么样?

小提琴示例:http://jsfiddle.net/anggagewor/cauPH/

解决方法

试试这个
var scntDiv = $('#p_scents');
var i = $('#p_scents tr').size() + 1;

$('#addScnt').click(function() {
    scntDiv.append('<tr><td><select name="type" id="type"><option value="Debit">Debit</option><option value="Credit">Credit</option></select></td><td><select name="accounts" id="accounts"><option value="">SELECT</option><option value="One">One</option><option value="Two">Two</option></select></td><td><input type="text" name="debit_amount" id="debit_amount"/></td><td><input type="text" name="credit_amount" id="credit_amount"/></td><td><a href="#" id="remScnt">Remove</a></td></tr>');   
    i++;
    return false;
});

//Remove button
$(document).on('click','#remScnt',function() {
    if (i > 2) {
        $(this).closest('tr').remove();
        i--;
    }
    return false;
});​

这是一个工作示例,包括删除功能DEMO.

原文链接:https://www.f2er.com/ajax/158945.html

猜你在找的Ajax相关文章