AJAX: add new row to table or remove using AJAX

Question

This is the logic: I input something to form, and the form is AJAX live search. after I found value, I click on add button and it creates new row in existing table / 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>

can i do that? if so, how?

Fiddle Example: http://jsfiddle.net/anggagewor/cauPH/

Can you create a fiddle? The question is not clearly understood. — Gurminder Singh, Sep 25 '13 at 06:11
@GurminderSingh sory, oke next time i'll post in fiddle for demo. — Anggagewor, Sep 25 '13 at 06:13
By the way, [HERE](http://stackoverflow.com/questions/15103661/dynamically-add-and-remove-table-rows?rq=1) is the similar question to yours. — Gurminder Singh, Sep 25 '13 at 06:21

score 10 · Answer 1 · answered Sep 25 '13 at 06:13

You can find the pseudo code below.

$('#button_id').on('click', function(e) {
    $.ajax({
        url : yourUrl,
        type : 'GET',
        dataType : 'json',
        success : function(data) {
            $('#table_id tbody').append("<tr><td>" + data.column1 + "</td><td>" + data.column2 + "</td><td>" + data.column3 + "</td></tr>");
        },
        error : function() {
            console.log('error');
        }
    });
});

score 8 · Accepted Answer · answered Sep 25 '13 at 06:10

Try this

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;
});

Here's a working example, including remove row functionality: DEMO.

score 0 · Answer 3 · answered Sep 25 '13 at 06:11

0

$("<tr><td>.....content...<td><a class='remove'>remove</a>").appendTo("#tableid tbody").find('.remove').click(function () {
    $(this).parent().parent().remove();
});

answered Sep 25 '13 at 06:11

ledzep2

801
7
12

Suvash sarker · Answer 4 · 2013-09-25T06:25:27.853

0

In your ajax response you can do this

$("#myTable > tbody").append('<tr><td>my data</td><td>more data</td></tr>');

'#myTable' will be replaced by your table id or class and <td>my data</td><td>more data</td> will be replaced by your content

edited Sep 25 '13 at 06:25

answered Sep 25 '13 at 06:12

Suvash sarker

3,140
1
18
21

AJAX: add new row to table or remove using AJAX

4 Answers4