I want to do is make a function that add data in my table and have a delete function in action column using jquery.

My problem is I'm having trouble putting my input values in the table using jquery.

  function Add(){
    $("#myTable tbody").append(
        "<tr>"+
        "<td><input type='text'/></td>"+
        "<td><input type='text'/></td>"+
        "<td><input type='radio'/></td>"+
        "<td><button class='btnDelete>Delete</button></td>"+
        "</tr>");   
        $(".Save").bind("click", Save);     
}; 

I want to do is make a function that add data in my table and have a delete function in action column using jquery.

My problem is I'm having trouble putting my input values in the table using jquery.

  function Add(){
    $("#myTable tbody").append(
        "<tr>"+
        "<td><input type='text'/></td>"+
        "<td><input type='text'/></td>"+
        "<td><input type='radio'/></td>"+
        "<td><button class='btnDelete>Delete</button></td>"+
        "</tr>");   
        $(".Save").bind("click", Save);     
}; 

• javascript
• jquery
• html
• datatable
• datatables

2 Answers 2

If you are using datatable, then use datatable 'fnAddData' function for adding new row instead of jquery append function. Check the following code,

    oTable = $('#myTable').dataTable();

     function Add(){

          var data = [
             $('#input1').val(),
             $('#input2').val(),
             $('#input3').val(),
             $('#input4').val()
          ];


          oTable.fnAddData(data);
     };

Here is legacy documentation for version 1.9.x

How to add row for version 1.9.x and below

Note: You better start using new version of data table 1.10.x