Показать/скрыть строку таблицы, если дочерний DIV пуст

Question

У меня есть таблица с несколькими записями. После каждой строки таблицы входа является строкой таблицы редактирования, с ячейкой, связанной с столбцом, внутри которой находится DIV, в который динамически загружается HTML. Проблема в том, что наличие всех этих пустых строк таблицы вызывает появление большого количества лишних пробелов на странице при ее рендеринге.

Я понимаю, что я не могу динамически загружать HTML непосредственно в ячейку, поэтому у меня есть DIV, в который я загружаю содержимое.

Я хочу скрыть любую строку таблицы, пока дочерний DIV в ней пуст, и покажите эту строку таблицы после того, как информация была динамически загружена в дочерний DIV. Эта динамически загруженная информация также может быть удалена, поэтому мне нужно, чтобы она снова была скрыта, как только она снова пуста.

<table width="100%"> 
    <tbody> 
    <tr> 
     <td>A</td> 
     <td>B</td> 
     <td>C</td> 
    </tr> 
    <tr style="display: none;"> 
     <td colspan="3"><div></div></td> 
    </tr> 
    </tbody> 
</table> 



$("tr").each(function() { 
    if (this.children().filter(":empty").length) { 
     this.hide(); 
    } else { 
     this.show(); 
    } 
}); 

Answer 1

• div не ребенок, это внук, поэтому children() не найдет div s. Вместо этого используйте контекст или find.

• Вы используете hide и show в элементе DOM, а не в элементе jQuery. Сначала вам нужно обернуть его в jQuery.

Поэтому run this code everytime you load something:

//find empty divs and hide it's tr 
$("div:empty").closest('tr').hide(); 

//find non-empty divs and show it's tr 
$("div:not(:empty)").closest('tr').show(); 

И посмотрите ма! Нет петель! Нет each! : D

Answer 2

Вы должны использовать $(this) вместо this.

Причина в том: $(this) является объектом JQuery, который позволяет вызывать методы JQuery как .children() и .filter(":empty") на нем, в то время как this только объект Javascript ...