Как скрыть строку, содержащую пустую ячейку

Question

В приведенной ниже таблице все ячейки под строкой 2 (tr class="row2") пусты, как проверить строку с пустой ячейкой и только скрыть (display: none) ее?

<table>
<tr class="row1">
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
<tr class="row2">
<td></td>
<td></td>
<td></td>
</tr>
...
<tr class="row100">
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
</table>

Answer 1

Есть как минимум два способа сделать это.

Во-первых, если все элементы <td> пусты, то внутренний текст элемента <tr> будет состоять только из пробелов, поэтому вы можете использовать $. Trim () с filter () и напишите:

$("tr").filter(function() {
    return $.trim($(this).text()) == "";
}).hide();

Вы также можете использовать селекторы : not () , : has () и : empty для явного соответствия элементов <tr>, которые содержат только пусто <td> элементов:

$("tr").not(":has(td:not(:empty))").hide();

Answer 2

С помощью следующего скрипта jQuery вы будете проходить по всем строкам таблицы, проверять все их столбцы и видеть, не является ли какой-либо из них пустым.

Если ни один из них не пуст, он скроет строку.

$('table tr').each(function(){

    var hide = true;
    $('td',this).each(function(){

        if($(this).html() != '')
            hide = false;

    });

    if(hide)
        $(this).hide();

});

Извините, это должно быть .html(), а не .val()

Вот пример jsfiddle: http://jsfiddle.net/dYkLg/

На самом деле это более короткая версия, она работает путем проверки того, равно ли количество пустых столбцов общему количеству столбцов в этой строке , непосредственно проверяющей наличие непустых столбцов в текущем ряд:

$('table tr').each(function(){

    if(!$('td:not(:empty)',this).length)
        $(this).hide();

});

Обновлено благодаря Тому Хаббарду

С помощью jsfiddle: http://jsfiddle.net/dYkLg/2/

Answer 3

Прежде всего, я бы дал вашей таблице идентификатор (т. Е. "Mytable")

Тогда вам просто нужно сделать:

$("#mytable td:empty").hide();

Надеюсь, я помог. В общем случае селектор: empty возвращает элементы, в которых вообще ничего нет (то есть нет дочерних элементов и нет содержимого).

Привет

Answer 4

вы можете использовать селектор :empty для проверки пустых значений

$("tr td:empty").hide();

вот рабочая скрипка http://jsfiddle.net/JujHv/1/

Answer 5

Что-то вроде (то есть для каждой строки, если есть ноль непустых тд, затем скрыть это):

$("tr").each(function (){  
         var JsThis = $(this);
         if($("td:not(:empty)",JsThis).size() === 0){
             JsThis.hide();
         }
       });

Answer 6

Если вы используете классы только для навигации по jQuery и не изменяете их высоту, попробуйте это:

$("tr").each(function(index)
{
    if ($(this).height() == 0)
        $(this).hide();
});

Answer 7

Таким образом, вы можете скрыть строку2

$('.row2').hide();

Answer 8

http://jsfiddle.net/hMb2q/

$('table tr').each(function(){

    var tr = $(this);
    var tdNumber = tr.find('td').length;
    var counter = 0;

    tr.find('td').each(function () {
        if ( $(this).html() == '' ) counter++;
    });

    if ( counter == tdNumber ) tr.remove();
});

Answer 9

Изменено для проверки ячейки без текста, поскольку наша CMS выводит пустые теги p для ячеек без содержимого.

  $('table tr').each(function(){
            var tr = $(this);
            var tdNumber = tr.find('td').length;
            var counter = 0;

            tr.find('td').each(function () {
                if ($(this).text().trim() == "") counter++;
            });

            if ( counter == tdNumber ) tr.remove();
        });