javascript - DataTable Javascript不添加行

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 格式不正确——您有两个未定义为标题的列标题，然后只有一个数据单元格未正确关闭。

试试这个:

<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();
  });
});