如何在继承第一行class的DataTable上追加TR？

Question

我正在使用下面的代码动态添加新行。我的问题是如果我重新调整 window，只有第一个固定行变成可折叠行。动态添加的行不继承第一个固定行的class。

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

$('.myApe').append('<tr role="row" class="even">'+
'<td><input type="text" name="TEU[]" id="TEU" class="form-control"></td> '+
'<td><div class="row"><input type="text" name="CBM[]" id="CBM" class="form-control">'+
'<button class="remove_field" 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>

Answer 1

不是使用 $('.myApe').append() 将新数据行添加到 DOM，而是需要将该行添加到 DataTable，以便 DataTables 知道新行存在 - 并且可以在正确的方法。

您可以使用 row().data() API 调用来执行此操作。

下面的可运行示例使用 HTML 的字符串来表示新行。单击“添加新行”按钮将第 4 行添加到 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>2,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>0,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>,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>3,060</td>
            </tr>

        </tbody>
    </table>

</div>


</body>
</html>

您不必在 row().data() 函数中提供 DOM <tr> 行。您还可以使用 JavaScript 数组和对象（取决于原始数据如何提供给 table）。

更新

后续问题是：

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

要从 DataTable 中删除一行，您可以使用 row().remove() API 函数。为此，您需要确定要删除的行。

有多种方法可以做到这一点。

一种常见的方法是在每一行中添加一个按钮（有各种关于此的 SO 问题和答案），然后使用按钮的点击事件来定位包含该按钮的父级 <tr>。

如果您在任何特定步骤上遇到困难，请随时提出新问题，但我认为使用 link 中的示例并在现有 SO 问题的帮助下实施它应该没问题。

如何在继承第一行class的DataTable上追加TR？

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

jquery

datatables

twitter-bootstrap