Question

我有一张看起来类似于以下内容的桌子..我总是想要thead＆amp; tfoot显示..：

<form method='post' id='frm1'>
<table cellpadding='0' cellspacing='0' border='0' id='logs' width='100%'>

<thead><tr id='thead'><th>Col1</th><th>Col2</th><th>Col3</th><th>Col4</th></tr></thead>
<tfoot><tr id='tfoot'><th>Col1</th><th>Col2</th><th>Col3</th><th>Col4</th></tr></tfoot>

<tbody class='fbody'>";


<tr id='empty'><td colspan='4'>empty results</td>

</tbody>

</table>
</form>

默认情况下，该表为空。用户使用搜索字段使用ajax查询数据库。结果将被传回，我使用$.each并循环返回结果并使用以下内容添加到表中：

$('#logs tr:last').before('<tr><td>' + td[0] + '</td><td>' + td[1] + '</td><td>' + td[2] + '</td><td>' + td[3] + '</td></tr>');

这似乎工作正常，但我遇到了一个问题..

如果返回结果，我需要删除empty行，如果没有返回结果，我需要显示empty行。

第一次搜索完成后，表格会显示其结果。如果我然后使用新标准进行搜索，则新结果将添加到表中，而不是替换原始结果，因此我最终会在表中显示第一个和第二个结果，而对于第二个搜索，它应该只是第二个结果。< / p>

我试过了：

   $("#logs").find('tr').slice(1,-1).remove()

这会清除显示正确的结果，但它会留下空行并删除tfoot。

知道如何让这个工作吗？

由于

快速更新..

我使用：

调用jquery / ajax查找

        $('body').on('click', '#find', function(){
        });

Answer 1

如果您想进行多次搜索，则应该隐藏此行。因此，在每次搜索时，首先删除所有数据行：

$("#logs .fbody").find('tr:not(#empty)').remove();

根据您要显示的数据显示或隐藏空的。您可以使用简单的CSS规则：

.fbody > tr + #empty {
  display: none;
}

因此，如果tr之前tbody内有#empty，则会隐藏它，否则会显示。

Answer 2

试试这个。

$("#logs").find('tr#empty').remove()

Answer 3

使用以下内容：

$('#logs').find('tbody').html("");

它将从id为“logs”的表格中清除所有内容

根据您的需要，这样做：

var RESULTS_NOT_EMPTY = "";

var empty_row = "<tr id='empty'><td colspan='4'>empty results</td></tr>";

// empty table
$('#logs').find('tbody').html("");

if (RESULTS_NOT_EMPTY) {
    // append new results
  }
else {
  $('#logs').find('tbody').append(empty_row);
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table cellpadding='0' cellspacing='0' border='0' id='logs' width='100%'>

<thead><tr id='thead'><th>Col1</th><th>Col2</th><th>Col3</th><th>Col4</th></tr></thead>
<tfoot><tr id='tfoot'><th>Col1</th><th>Col2</th><th>Col3</th><th>Col4</th></tr></tfoot>

<tbody class='fbody'>

</tbody>

</table>

Answer 4

您可以尝试以下方法：

var trData = datagotFromAjaxResp;

$('#logs tbody tr').not('tr#empty').remove(); //remove previously added search result

if(trData.length > 0){
    $('tr#empty').hide(); //hide the empty row if we have result
}
else
{
    $('tr#empty').show(); //show the empty row if we don't have result
}
//attach search result if any
$.each(trData, function( index, td ) {

    $('#logs tbody tr:last').before('<tr><td>' + td[0] + '</td><td>' + td[1] + '</td><td>' + td[2] + '</td><td>' + td[3] + '</td></tr>');

});

清空动态创建的表

4 个答案: