我正在使用下面的代碼動態添加一個新行。我的問題是如果我重新調整視窗，只有第一個固定行變成可折疊的。動態添加的行不繼承第一個固定行的類。
<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>
uj5u.com熱心網友回復：
$('.myApe').append()您需要將新行添加到 DataTable，而不是使用 將新資料行添加到 DOM ，以便 DataTables 知道新行存在 - 并且可以以正確的方式處理它。
您可以使用row().data()API 呼叫來執行此操作。
下面的可運行示例使用 HTML 字串來表示新行。單擊“添加新行”按鈕向表中添加第 4 行：
$(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>您不必<tr>在row().data()函式中提供 DOM行。您還可以使用 JavaScript 陣列和物件（取決于向表提供原始資料的方式）。
更新
后續問題是：
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.
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/324531.html