【发布时间】：2019-08-28 05:17:09
【问题描述】：
$(document).ready(function(){
$('#table').DataTable();
$('#add').on('click',()=>{
$("#popup").dialog({
width:400,
modal:true,
resizeable:false,
buttons:{
"Submit":function(){
var addrow = '<tr><td><input type="checkbox" class="select"></td><td>'+
$('#name').val()+'</td><td>'
+$("#age").val()+
'</td><td>'+
'<button type="button" class="edit" >Edit</button>'+
'</td></tr>';
$('#table tbody').append(addrow);
$('.add-input').val('');
$(this).dialog("close");
}
}
});
})
$("#delete").on("click", function () {
$('table tr').has('input:checked').remove();
})
$('#deleteall').on('click',function(){
$('tbody tr').remove();
})
$('tbody').on('click',".edit",(event)=>{
$("#popup").dialog({
width:400,
modal:true,
resizeable:false,
buttons:{
"Submit":function(){
var name = '<tr><td><input type="checkbox" class="select"></td><td>'+
$('#name').val()+'</td><td>'
+$("#age").val()+
'</td><td>'+
'<button type="button" class="edit" >Edit</button>'+
'</td></tr>';
$(event.currentTarget).parents('tr').replaceWith(name);
console.log($('tr'));
$('.add-input').val('');
$(this).dialog("close");
}
}
})
})
})<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>table edit</title>
<link rel = "stylesheet" type = "text/css" href = "style.css" >
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript" src="tab-mod.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.10.2.js" type="text/javascript"></script>
<script src="http://code.jquery.com/ui/1.11.2/jquery-ui.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="http://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css"/>
<script type="text/javascript" src="http://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
</head>
<body>
<div class="table-wrap">
<table id="table" border="1">
<thead>
<tr>
<th>Select</th>
<th>Name</th>
<th>Age</th>
<th>Edit</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" class="select"></td>
<td>Sakthi</td>
<td>20</td>
<td><button type="button" class="edit" >Edit</button></td>
</tr>
<tr>
<td><input type="checkbox" class="select"></td>
<td>Prabhu</td>
<td>21</td>
<td><button type="button" class="edit" >Edit</button></td>
</tr>
<tr>
<td><input type="checkbox" class="select"></td>
<td>Sakthi</td>
<td>20</td>
<td><button type="button" class="edit" >Edit</button></td>
</tr>
</tbody>
</table>
</div>
<div class="op">
<button type="button" class="mod" id="add">Add</button>
<button type="button" class="mod" id="delete">Delete</button>
<button type="button" class="mod" id="deleteall">Delete All</button>
</div>
<div class="popup" id="popup" style="display:none;">
<input type="text" placeholder="Name" class="add-input" id="name">
<input type="number" placeholder="Age" class="add-input" id="age">
</div>
</body>
</html>使用我的代码添加、删除或编辑行后，我无法使用搜索选项搜索新添加的行。搜索时未显示新添加的行。我认为当我添加或编辑一行时表格没有更新。此外，当我使用 delete 或 deleteall 时，当我搜索已删除的行时，该行仍然存在。我该如何克服呢？ 谢谢！
【问题讨论】：
-
您应该使用
clear()删除所有行，使用row().remove()删除选定行并使用row.add()添加一行。看看我的回答你可以做到
标签： jquery html datatables