Как сделать <tr> невидимым, если он <td> пуст?

0

У меня есть таблица, которая содержит "n" строки, динамически сгенерированные. Все <td> могут содержать или не содержать данные. Я хочу скрыть или удалить ' <tr> ', если все это td пустые.

Я не знаю, как разобрать все <td> и убедиться, что он пуст или нет.

пример таблицы следующим образом,

<table id='ex_table'>
  <tr>
     <td>one</td>
     <td>two</td>
  </tr>
  <tr>
     <td></td>
     <td>one</td>
  </tr>
  <tr>
     <td></td>
     <td></td>
  </tr>
</table>

В приведенной выше таблице последняя строка должна быть скрыта, поскольку все ее <td> пустые. Я предпочитаю jquery для этого.

  • 0
    Взгляните на этот вопрос
Теги:
dom

5 ответов

8
Лучший ответ

Вам не нужно проверять элементы td. Вы можете выбрать строки и использовать .filter чтобы отфильтровать те, у которых есть текстовое содержимое, т. .filter только те, которые пусты:

$('#ex_table tr').filter(function() {
    return $.trim($(this).text()) === '';
}).hide(); // or .remove()

Это работает, потому что .text получает объединенный внутренний текст всех потомков, а $.trim удаляет пробельные символы, которые могут возникнуть из-за вашего форматирования HTML (но на самом деле они не являются содержимым).


Если у вас есть ячейки, которые содержат элементы HTML, но не содержат текстового содержимого (например, значки, созданные через CSS), и вы хотите их сохранить, вам действительно нужно проверить, содержит ли ячейка HTML или нет. Этот подход в основном аналогичен тестированию текстового контента

$('#ex_table tr').filter(function() {
    return $(this).children().filter(function() {
        return $.trim($(this).html()) !== '';
    }).length === 0;
}).hide();

только в этот раз мы подсчитываем количество ячеек в строке, содержащих HTML. Если их нет, строка считается пустой.

1

попробуй что-нибудь вроде этого

$(function(){
    $('#ex_table tr').each(function(){
        var val = $(this).text().trim();
        if(val == ''){
            $(this).remove();
        }
    })
})
  • 0
    Большое спасибо. Оно работает.
0

Попробуйте этот код

var hide;
$("tbody").find("tr").each(function(){
    hide=true;
    $(this).find("td").each(function(){
        if($(this).html()!='') {
            hide=false;
        }
    });
    if(hide==true) {
        $(this).hide();
    }
});
0

Прямо jQuery вы говорите?

EDIT: я бы использовал Felix ответ.. просто измените ".hide()" на ".remove()", если вы хотите удалить элемент.

$('tr').each(function(){
  var hasValue = false;
  $(this).children().each(function(){
     if ($(this).html() != "")
        hasValue = true;
  });
if (!hasValue)
    $(this).remove();
});
0

Попробуй это:

$('#ex_table tr').each(function){
  if($(this).text()==''){
    $(this).remove();
  }
}

Ещё вопросы

Сообщество Overcoder
Наверх
Меню