AJAX: thêm hàng mới vào bảng hoặc loại bỏ bằng cách sử dụng AJAX

Question

Đây là logic: Tôi nhập thứ gì đó để tạo thành và biểu mẫu là tìm kiếm trực tiếp AJAX. sau khi tôi tìm thấy giá trị, tôi bấm vào nút thêm và nó tạo ra hàng mới trong bảng/tbody hiện có.

<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> 

tôi có thể làm điều đó không? nếu vậy, làm thế nào?

Fiddle Ví dụ: http://jsfiddle.net/anggagewor/cauPH/

Answer 1

Hãy thử điều này

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

Dưới đây là một ví dụ làm việc, bao gồm loại bỏ chức năng hàng: 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

Để đối phó ajax của bạn, bạn có thể làm điều này

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

sẽ được thay bằng id bảng của bạn hoặc lớp và <td>my data</td><td>more data</td> sẽ được thay thế bằng nội dung của bạn

Answer 4

Bạn có thể tìm thấy mã giả phía dưới.

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