AJAX: add a new row to a table or delete using AJAX

Question

This is the logic: I enter something into the form, and the form is a direct search in AJAX. after I found the value, I click the add button and creates a new row in the existing / tbody table.

<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 it? if so, how?

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

Answer 1

try it

 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 is a working example that involves removing the functionality of a string: DEMO .

Answer 2

Below you can find the pseudo code.

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

Answer 3

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

Answer 4

In ajax answer you can do this

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

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