DataTable Javascript不添加行

Question

我正在尝试使用此方法https://datatables.net/examples/api/add_row.html，我的表格由几个不同的 HTML 元素组成，它们属于 select 和 input 类型。我在这里将其简化为一个输入和一列。我的目标是单击“添加行”按钮并将包含所有元素的确切行添加到表中。但是当我单击“添加行”按钮时，条目数会增加，在控制台中没有错误或警告，但我仍然没有看到新行被添加到表中。

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

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() 这删除行与表的关联） .