php AJAX：向表中添加新行或使用 AJAX 删除
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18997336/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
AJAX: add new row to table or remove using AJAX
提问by Anggagewor
This is the logic: I input something to form, and the form is AJAX live search. after I found value, I click on add button and it creates new row in existing table / tbody.
这就是逻辑：我输入了一些东西来形成，这个表单是 AJAX 实时搜索。找到值后，我单击添加按钮并在现有表/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>
can i do that? if so, how?
我可以吗？如果是这样，如何？
Fiddle Example: http://jsfiddle.net/anggagewor/cauPH/
采纳答案by Nathan Srivi
Try this
尝试这个
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's a working example, including remove row functionality: DEMO.
这是一个工作示例，包括删除行功能：DEMO。
回答by Chaitanya Munipalle
You can find the pseudo code below.
您可以在下面找到伪代码。
$('#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');
}
});
});
回答by ledzep2
$("<tr><td>.....content...<td><a class='remove'>remove</a>").appendTo("#tableid tbody").find('.remove').click(function () {
$(this).parent().parent().remove();
});
回答by Suvash sarker
In your ajax response you can do this
在您的 ajax 响应中，您可以执行此操作
$("#myTable > tbody").append('<tr><td>my data</td><td>more data</td></tr>');
'#myTable'will be replaced by your table id or class and <td>my data</td><td>more data</td>will be replaced by your content
'#myTable'将被您的表 ID 或类<td>my data</td><td>more data</td>替换，并将被您的内容替换
