jquery datatable row.add with button and input box

问题:

Hi I am new to jquery and trying to dynamically add row dynamically using the button from another datatable row.

Is there any easy way that using the row.add() function to create a row with button and input text like the below tr ?

<tr>
<td> <button type="button" class="btn green btn-xs select-row" data-id="7" data-includeTax="N">btn</button>
</td>
<td>1</td>
<td>2</td>
<td><input type="text" ></td>
<td>3</td>

im trying to call function similar to below on onclick event

saleDetailDT.row.add([..... ? ]).draw();

回答1:

Try something like this:

 <script>
   $('#dataTables').DataTable();
   $(document).on("click","#your_element_id",function(){ 
     var table = $('#dataTables').DataTable();
     table.row.add(['<button type="button" class="btn green btn-xs select-row" data-id="7" data-includeTax="N">btn</button>','1','2','<input type="text">','3']).draw();
     // table.row.add([first_td_html_of_tr,second_td-html_of_tr,third_td_html_of_tr,...nth td_html_of_tr]).draw();
   });

 </script>

And dont forget to give your table id="datatables" as below.

<table id ="datatables">
  //
</table>

回答2:

Maybe you are searching for something like:

$('#myTable > tbody:last-child').append('<tr>...</tr><tr>...</tr>');

Please see Add table row in jQuery