Tabelle zeilenweise ausblenden mit jQuery


Möchte man mit jQuery einige Zeilen aus einer Tabelle ausblenden, so könnte man auf folgende einfache Lösung verfallen:

Ursprüngliche Tabelle:

Zeile 1
Zeile 2
Zeile 3

Tabelle mit <div> und checkbox:

Zeile 1
Zeile 2
Zeile 3
Zeile 2 verstecken

jQuery-Code zum Ausblenden der Zeile 2:

function hideshow() {
  if ($("#cb_test").attr("checked"))
    $("#test").hide();
  else 
    $("#test").show();
}

Dieser Ansatz funktioniert leider nicht, da es nicht möglich ist, Tabellen- und Textstrukturierungelemente zu mischen. Seit HTML 4 gibt es allerdings das <tbody>-Element, das man für diesen Zweck verwenden kann:

Zeile 1
Zeile 2
Zeile 3
Zeile 2 verstecken

Laut HTML-Validator des W3C ist diese Lösung „HTML 4.01 Transitional“-valide.


6 Antworten zu “Tabelle zeilenweise ausblenden mit jQuery”

  1. Warum macht man das nicht per css und über IDs?

    function hideshow() {
    var obj=document.getElementById(‚t2′);
    if(obj.style.display==’none‘){
    obj.style.display=’inline‘;
    }
    else
    {
    obj.style.display=’none‘;
    }
    }

    1a
    1b
    1c

    2a
    2b
    2c

    hideshow

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert