清空动态创建的表答案

【问题标题】：Emptying dynamically created table清空动态创建的表
【发布时间】：2016-10-19 07:40:41
【问题描述】：

我有一张看起来类似于以下的表格.. 我希望在任何时候都显示 thead & 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行。

第一次搜索完成后，表格会显示其结果。如果我随后使用新条件进行搜索，则新结果将添加到表中，而不是替换原始结果，因此我最终得到一个显示第一个和第二个结果的表，当第二次搜索时，它应该只是第二个结果。

我试过了：

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

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

知道如何让它工作吗？

谢谢

快速更新..

我正在调用 jquery / ajax 查找使用：

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

【问题讨论】：

试试这个 $("#logs").find("tbody").empty()
将之前的搜索值保留在表中。

标签： jquery html html-table

【解决方案1】：

如果你想处理多个搜索，你应该隐藏这一行。所以在每次搜索时，首先删除所有数据行：

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

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

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

所以如果tbody在#empty之前有tr，它会被隐藏，否则会显示。

【讨论】：

感谢这有帮助。我根据需要隐藏或显示empty 行并删除其他行，但不是thead 或tfoot。

【解决方案2】：

试试这个。

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

【讨论】：

刚刚删除了“空”行。当我再次搜索时，旧值仍然显示。
$("#logs").find("tbody").empty() 应该删除您之前的结果。如果您遇到任何错误，请检查控制台。
虽然这段代码可能有助于解决问题，但它并没有解释为什么和/或如何回答问题。提供这种额外的背景将显着提高其长期教育价值。请edit您的答案添加解释，包括适用的限制和假设。

【解决方案3】：

您可以尝试以下方法：

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】：

使用以下：

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

它会从 id 为 "logs" 的表的 tbody 中清除所有内容

根据您的需要，这样做：

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>

【讨论】：