AJAX: dodaj nowy wiersz do tabeli lub usuń za pomocą AJAX

Question

To jest logika: Wprowadzam coś do formularza, a formularz jest wyszukiwaniem na żywo AJAX. po znalezieniu wartości klikam przycisk dodawania i tworzy on nowy wiersz w istniejącej tabeli/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> 

Czy mogę to zrobić? Jeśli tak to jak?

Fiddle Przykład: http://jsfiddle.net/anggagewor/cauPH/

Answer 1

Spróbuj

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

Oto przykład pracy, w tym usunięcie funkcjonalności rzędu: DEMO.

Answer 2

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

Answer 3

W odpowiedzi ajax można to zrobić

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

zostanie zastąpiony przez swojego identyfikatora stołowego lub klasy i <td>my data</td><td>more data</td> zostanie zastąpiona zawartością

Answer 4

można znaleźć kod pseudo poniżej.

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