How To Append TR on DataTable which Inherit the first row's class?-CodePudding

I am using the code below to dynamically add a new row. My problem is if I re-adjust the window, only the first fixed row turns into a collapsible one. The dynamically added row doesn't inherit the class of the first fixed row.

<script>
var x = 1;  
function addContainer1(){
var max_fields_limit      = 10; 

$('.myApe').append('<tr role="row" >' 
'<td><input type="text" name="TEU[]" id="TEU" ></td> ' 
'<td><div ><input type="text" name="CBM[]" id="CBM" >' 
'<button  onclick="removeContainer()">-</button>        </div></td>' 
'</tr>');           
x  ;            
$('.myApe').on("click",".remove_field", function(e){ //user click on remove text
    e.preventDefault(); $(this).closest('tr').remove(); x--;
})
}

<table id="example14" class="table table-striped table-sm">
<thead>

<tr>
<th>Container No</th>
 <th>CBM</th>
</tr>
</thead>
<tbody class="myApe">
          
<tr>
<td>
<input type="text" name="TEU[]" id="TEU" class="form-control" placeholder="Container Number"  required> 
</td>

<td>
<div class="row">
<input type="text" name="CBM[]" id="CBM" class="form-control" placeholder="CBM"  required style="width:80%">
<button type="button"  class="btn btn-sm btn-primary" onclick="addContainer1()"> </button>
</div>
</td>
</tr>                   
</tbody>
</table>

CodePudding user response：

Instead of adding the new data row to the DOM using $('.myApe').append(), you need to add the row to the DataTable, so that DataTables knows the new row exists - and can handle it in the correct way.

You can use the row().data() API call to do this.

The following runnable example uses a string of HTML to represent the new row. Click on the "add new row" button to add a 4th row to the table:

  $(document).ready(function() {

    var table = $('#example').DataTable( {
      responsive: true,
      columnDefs: [
        { responsivePriority: 1, targets: -2 }
      ]
    } );

    let newRow = "<tr><td>4</td><td>Donna Snider</td><td>Customer Support</td><td>New York</td><td>27</td><td>2011/01/25</td><td>$112,000</td></tr>";

    $( "button" ).on( "click", function() {
      table.row.add( $(newRow) ).draw();
      $( "button" ).off(); // this demo only adds one row
    });

  } );

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Demo</title>
  <script src="https://code.jquery.com/jquery-3.5.1.js"></script>
  <script src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.js"></script>
  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.22/css/jquery.dataTables.css">
  <link rel="stylesheet" type="text/css" href="https://datatables.net/media/css/site-examples.css">

  <!-- responsive plug-in -->
  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/responsive/2.2.6/css/responsive.dataTables.css"/>
  <script type="text/javascript" src="https://cdn.datatables.net/responsive/2.2.6/js/dataTables.responsive.js"></script>
  
</head>

<body>

<div style="margin: 20px;">

    <button type="button">Add New Row</button> 

    <br><br>

    <table id="example" class="display dataTable nowrap cell-border" style="width:100%">
        <thead>
            <tr>
                <th>ID</th>
                <th>Name</th>
                <th>Title</th>
                <th>Office</th>
                <th>Age</th>
                <th>Start Date</th>
                <th>Salary</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>Garrett Winters</td>
                <td>Accountant</td>
                <td>Tokyo</td>
                <td>63</td>
                <td>2011/07/25</td>
                <td>$170,750</td>
            </tr>
            <tr>
                <td>2</td>
                <td>Ashton Cox</td>
                <td>Junior Technical Author</td>
                <td>San Francisco</td>
                <td>66</td>
                <td>2009/01/12</td>
                <td>$86,000</td>
            </tr>
            <tr>
                <td>3</td>
                <td>Cedric Kelly</td>
                <td>Senior Javascript Developer</td>
                <td>Edinburgh</td>
                <td>22</td>
                <td>2012/03/29</td>
                <td>$433,060</td>
            </tr>

        </tbody>
    </table>

</div>


</body>
</html>

You don't have to provide a DOM <tr> row in the row().data() function. You can also use JavaScript arrays and objects (depending on how the original data was provided to the table).

Update

The follow-up question is:

how to delete a row if, for example, I added too many rows?

To delete a row from a DataTable you can use the row().remove() API function. For this you need to identify which row you want to remove.

There are various ways to do this.

One common way is to add a button into each row (there are various SO questions and answers covering this) and then use the button's click event to locate the parent <tr> containing the button.

Feel free to ask a new question if you get stuck with any specific step, but I think it should be OK to implement this, using the examples in the link and with help from existing SO questions.