AJAX：向表添加新行或使用AJAX刪除

這是邏輯：我輸入了一些內容，表單是AJAX實時搜索。在找到值之後，我點擊添加按鈕，並在現有表/ tbody中創建新行。AJAX：向表添加新行或使用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/

來源

2013-09-25 Anggagewor

你可以創建一個小提琴嗎？這個問題並不清楚。 –

@GurminderSingh sory，下次我會在小提琴上發表演示。 – Anggagewor

順便說一下，[這裏]（http://stackoverflow.com/questions/15103661/dynamically-add-and-remove-table-rows?rq=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。

來源

2013-09-25 06:10:42

嘿，謝謝演示，它的工作... – Anggagewor

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

來源

2013-09-25 06:11:11 ledzep2

在你的Ajax響應，你可以做到這一點

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

會被你的表ID或類<td>my data</td><td>more data</td>更換會被你的內容替換

來源

2013-09-25 06:12:37

你可以找到的僞代碼下面。

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

來源

2013-09-25 06:13:45

這對我有用，謝謝 –

AJAX：向表添加新行或使用AJAX刪除

回答

相關問題