$(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(...);

08-06 19:22