我正在尝试使用此方法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();
});
});
答案 0 :(得分:2)
您的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();
});
});
答案 1 :(得分: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()
此行删除该行的关联与表)。