Опорожнение динамически созданная таблица

Question

У меня есть таблица, которая выглядит примерно следующим образом .. во все времена я хочу 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(){ 
     }); 

Answer 1

Если вы хотите hanlde multiple search, вы должны скрыть эту строку. Таким образом, на каждом поиске, сначала удалите все строки данных:

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

Он очистит все от 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>

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>'); 

});