$(document).ready(function () {
$('#btnSearch').bind('click', function () {
var textS = $("#txtSearch").val();
var filterS = $("#Filter option:selected").val();
var url = '@Url.Action("SearchGuest","Dashboard")';
alert(url);
$.ajax({
type: 'GET',
url: url,
data:{text:textS,filter:filterS},
success: function (emp) {
$('#TableGuest tbody > tr').remove();
jQuery.each(emp, function (i, val) {
$('#TableGuest tr:last').after("<tr><td>"+val.Name+"</td><td>"+val.FatherName+"</td><td>"+val.CNIC+"</td><td>"+val.Phone+"</td></tr>");
});
},
error: function (emp) {
}
});
});
});
我尝试了各种功能,例如
$('#TableGuestBody').empty()
$('#TableGuest tbody > tr').remove();
$("#TableGuestBody").html("");
但是以上都不起作用:(
它会继续添加新行,而不会删除以前的行!
注意:我只想删除
<tr>
中的<tbody>
最佳答案
假设您确实有一个<tbody id="TableGuestBody">
元素,那么使用$('#TableGuestBody').empty()
可以正常工作(并清除所有<tr>
元素)。
您的问题在于添加新行的方式。
$('#TableGuest tr:last').after(...);
将在表中最后一个
<tr>
元素之后添加新行,并且由于您刚刚删除了<tbody>
元素中的所有行,因此新行将添加到您的<thead>
元素中。因此,现在当您调用$('#TableGuestBody').empty()
时,它会清除已经为空的<tbody>
元素的内容,但是您仍会看到先前添加的行,因为它们位于<thead>
元素中。修改您的代码以向其中添加新行$('#TableGuestBody').append(...);