AJAX: AJAX

Question

का उपयोग करके तालिका में नई पंक्ति जोड़ें या निकालें यह तर्क है: मैं फॉर्म बनाने के लिए कुछ इनपुट करता हूं, और फॉर्म AJAX लाइव खोज है। मुझे मूल्य मिलने के बाद, मैं ऐड बटन पर क्लिक करता हूं और यह मौजूदा तालिका/टैब में नई पंक्ति बनाता है।

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

Answer 1

पंक्ति कार्यक्षमता निकालने के तरीकों समेत इस

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।

Answer 2

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

Answer 3

अपने ajax जवाब में आप इस

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

अपनी मेज आईडी या वर्ग और <td>my data</td><td>more data</td> से बदल दिया जाएगा अपनी सामग्री से बदल दिया जाएगा कर सकते हैं

Answer 4

आप छद्म कोड प्राप्त कर सकते हैं नीचे।

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