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 thoughts on “Tabelle zeilenweise ausblenden mit jQuery”

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

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

To respond on your own website, enter the URL of your response which should contain a link to this post's permalink URL. Your response will then appear (possibly after moderation) on this page. Want to update or remove your response? Update or delete your post and re-enter your post's URL again. (Find out more about Webmentions.)