Ich habe eine Tabelle, die 'n' Zeilen enthält, die dynamisch generiert wurden. Alle <td> können Daten enthalten oder nicht. Ich möchte '<tr>' ausblenden oder löschen, wenn alle tds leer sind.

Ich weiß nicht, wie ich alle <td> durchsuchen und sicherstellen soll, dass sie leer sind oder nicht.

Beispieltabelle wie folgt:

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

In der obigen Tabelle muss die letzte Zeile ausgeblendet werden, da alle <td> leer sind. Ich bevorzuge jquery, um dies zu tun.

0
JaiSat 3 Dez. 2013 im 12:11

5 Antworten

Beste Antwort

Sie müssen die td Elemente nicht wirklich überprüfen. Sie können die Zeilen auswählen und .filter verwenden, um nur diejenigen mit Textinhalt herauszufiltern halte diejenigen, die leer sind:

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

Dies funktioniert, weil .text den kombinierten inneren Text aller Nachkommen erhält und $.trim Leerzeichen entfernt, die aufgrund Ihrer HTML-Formatierung auftreten können (aber nicht wirklich Inhalt sind).


Wenn Sie Zellen haben, die HTML-Elemente, aber keinen Textinhalt enthalten (z. B. durch CSS gestaltete Symbole), und diese beibehalten möchten, müssen Sie tatsächlich testen, ob eine Zelle HTML enthält oder nicht. Der Ansatz entspricht im Wesentlichen dem Testen auf Textinhalte

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

Nur dieses Mal zählen wir die Anzahl der Zellen in einer Zeile, die HTML enthalten. Wenn es keine gibt, wird die Zeile als leer betrachtet.

8
Felix Kling 3 Dez. 2013 im 08:27

Versuche so etwas

$(function(){
    $('#ex_table tr').each(function(){
        var val = $(this).text().trim();
        if(val == ''){
            $(this).remove();
        }
    })
})
1
rajesh kakawat 3 Dez. 2013 im 08:18

Straight jQuery, sagst du?

EDIT: Ich würde Felix 'Antwort verwenden. Ändern Sie einfach ".hide ()" in ".remove ()", wenn Sie das Element löschen möchten.

$('tr').each(function(){
  var hasValue = false;
  $(this).children().each(function(){
     if ($(this).html() != "")
        hasValue = true;
  });
if (!hasValue)
    $(this).remove();
});
0
brdu 3 Dez. 2013 im 08:22

Versuchen Sie diesen Code

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
RaHuL 3 Dez. 2013 im 08:35

Versuche dies:

$('#ex_table tr').each(function){
  if($(this).text()==''){
    $(this).remove();
  }
}
0
Ringo 3 Dez. 2013 im 08:18