DataTableJavaScript不添加行

我尝试使用这个方法，我的表由几个不同的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>

---

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>

列标题1
列标题2
添加行

然后你的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();
  });
});

$（文档）.ready（函数（）{
var t=$（'#myTable'）.DataTable（）；
$（'#addRow'）。在（'单击'，函数（）上）{
var jRow=$（''）.append（'Cell 1'，'Cell 2'）；
jRow.attr（'id'，'myRow2'）；
t、 row.add（jRow.draw（）；
});
});

您的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>

列标题1
列标题2
添加行

然后你的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();
  });
});

$（文档）.ready（函数（）{
var t=$（'#myTable'）.DataTable（）；
$（'#addRow'）。在（'单击'，函数（）上）{
var jRow=$（''）.append（'Cell 1'，'Cell 2'）；
jRow.attr（'id'，'myRow2'）；
t、 row.add（jRow.draw（）；
});
});

他们的HTML标记存在一些问题。例如：

列标题1列标题2

应该是

标题1标题2

是行，

是行标题

另外，请确保您关闭了这些语句

id=“colorField

”忘记结尾处的（

“

）

以下是工作示例：

$（文档）.ready（函数（）{
var$table=$（'#table'）.DataTable（），
计数器=$（“#表”）.find（“tbody>tr”）.length；//获取当前行数
$（'.addRow'）。在（'click'，function（）上{
var$row=$（'.row0'），//查找默认行
newRow=$row.clone（）.attr（“类”，“行”+计数器）；//克隆行并更改类
$table.row.add（newRow.draw（）；//添加到表中
计数器+++；//增加计数器
});
});

标题1
标题2
输入颜色：
添加行
他们的HTML标记存在一些问题。例如：

列标题1列标题2

应该是

标题1标题2

是行，
是行标题

另外，请确保您关闭了这些语句
id=“colorField
”

忘记结尾处的（

“

）

以下是工作示例：

$（文档）.ready（函数（）{
var$table=$（'#table'）.DataTable（），
计数器=$（“#表”）.find（“tbody>tr”）.length；//获取当前行数
$（'.addRow'）。在（'click'，function（）上{
var$row=$（'.row0'），//查找默认行
newRow=$row.clone（）.attr（“类”，“行”+计数器）；//克隆行并更改类
$table.row.add（newRow.draw（）；//添加到表中
计数器+++；//增加计数器
});
});

标题1
标题2
输入颜色：
Add Row
答案很好，虽然我无法让它工作，但我在counter=$（“#table”）上得到了一个错误。find（“tbody>tr”）.size（）；$（…）.find（…）.size不是一个函数，这很奇怪，因为$（“#table”）是一个jQuery对象。@payam.size（）方法在jQuery 1.8中被弃用。请改用.length属性。@offerpe'er谢谢你不知道。全部更新。答案很好，虽然我无法让它工作，但我在计数器=$（“#table”）上得到了一个错误。find（“tbody>tr”）.size（）；$（…）.find（…）.size不是一个函数，这很奇怪，因为$（“#table”）是一个jQuery对象。@payam.size（）方法在jQuery 1.8中被弃用。请改用.length属性。@offerpe'er谢谢你不知道。全部更新。