DataTable Javascript does not add row

Question

我想用這個方法https://datatables.net/examples/api/add_row.html，我的表格由幾個不同的HTML元素組成，他們是類型選擇和輸入。我把它簡化爲一個輸入和一個列。我的目標是點擊「添加行」按鈕，並將包含所有元素的確切行添加到表中。但是，當我點擊'添加行'按鈕時，條目數會增加，在控制檯中沒有錯誤或警告，但仍然沒有看到將新行添加到表中。

<table id="myTable"> 
<thead> 
    <tr>column header 1</tr> 
    <tr>column header 2</tr> 
</thead> 
<tbody> 
    <tr id="myRow"> 
    <td id="colorField> 
    <input id="color"> 
    </td> 
    </tr> 
</tbody> 
</table> 

JS部分：

$(document).ready(function() { 
    var t = $('#myTable').DataTable(); 
    $('#addRow').on('click', function(){ 
     var jRow = $('#myRow'); 
     jRow.id = "myRow2"; //I thought about changing the id but also not effective 
     t.row.add(jRow).draw(); 

    }); 

}); 

Answer 1

有你的HTML和JavaScript中的一些問題。

的HTML是無法正確formed--你有沒有被定義爲頭兩個列標題，並且無法正常關閉，那麼只有一個數據單元。

試試這個：

<table id="myTable"> 
    <thead> 
    <tr> 
     <th>column header 1</th> 
     <th>column header 2</th> 
    </tr> 
    </thead> 
    <tbody> 
    <tr id="myRow"> 
     <td id="colorField"> 
      <input id="color" type="text"/> 
     </td> 
     <td></td> 
    </tr> 
    </tbody> 
</table> 
<button id="addRow">Add Row</button> 

然後你的JS需要一些變化也。您可以添加一個jQuery對象作爲行，例如像這樣：

$(document).ready(function() { 
    var t = $('#myTable').DataTable(); 
    $('#addRow').on('click', function(){ 
    var jRow = $('<tr>').append('<td>Cell 1</td>','<td>Cell 2</td>'); 
    jRow.attr('id', 'myRow2'); 
    t.row.add(jRow).draw(); 
    }); 
}); 

Answer 2

他們是你的HTML標記了一些問題。例如：

<tr>column header 1</tr><tr>column header 2</tr>

應該是

<tr><th>Header 1</th><th>Header 2</th></tr>

<tr>是行和<th>爲行標題。

也請確保id="colorField您關閉這些語句id="colorField"忘記了（"）最後。

這裏工作示例：

$(document).ready(function() { 
 
    var $table = $('#table').DataTable(), 
 
    counter = $('#table').find("tbody > tr").length; // get current number of rows 
 
    $('.addRow').on('click', function() { 
 
    var $row = $('.row0'), // find the default row 
 
     newRow = $row.clone().attr("class", "row" + counter); // clone the row and change the class 
 
    $table.row.add(newRow).draw(); // add to the table 
 
    counter++; // increase counter 
 
    }); 
 
});

<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script> 
 

 
<table id="table"> 
 
    <thead> 
 
    <tr> 
 
     <th>Header 1</th> 
 
     <th>Header 2</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr class="row0"> 
 
     <td class="field-label">Enter a color:</td> 
 
     <td class="field"> 
 
     <input class="color"> 
 
     </td> 
 
    </tr> 
 
    </tbody> 
 
</table> 
 
<button class="addRow">Add Row</button>

在$row.clone().attr("class", "row" + counter);這條線，你不需要改變類，但只有在你想給它分配任何JavaScript事件更容易（但你需要.clone()這個刪除行與表的關聯）。