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

回答

相关问题