DataTable Javascriptで行が追加されない

Question

このメソッドhttps://datatables.net/examples/api/add_row.htmlを使用しようとしていますが、私のテーブルはいくつかの異なるHTML要素で構成されています。私は1つの入力と1つの列だけに簡略化しました。私の目標は、「行を追加」ボタンをクリックし、すべての要素を含む正確な行をテーブルに追加することです。しかし、 'add row'ボタンをクリックすると、エントリ数が増えます。コンソールにエラーや警告は表示されませんが、テーブルに追加される新しい行は表示されません。

<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が正しく形成されていません。ヘッダーとして定義されていない2つの列ヘッダーがあり、正しく閉じられていないデータセルは1つだけです。

<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"最後に（"）を忘れてください。あなたがクラスを変更する必要がありますが、あなたはそれを任意のJavaScriptイベントを割り当てたい場合は、それが容易になります（ただしはありません。このライン$row.clone().attr("class", "row" + counter);で

$(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>

：ここでは例を作業

.clone()する必要がありますこれは、行とテーブルの関連付けを削除します）。