Tabelle zeilenweise ausblenden mit jQuery

11. März 2009 5 Comments

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

Ursprüngliche Tabelle:

<table>
  <tr><td>Zeile 1</td></tr>
  <tr><td>Zeile 2</td></tr>
  <tr><td>Zeile 3</td></tr>
</table>

Tabelle mit <div> und checkbox:

<table>
  <tr><td>Zeile 1</td></tr>
  <div>
    <tr><td>Zeile 2</td></tr>
  </div>
    <tr><td>Zeile 3</td></tr>
</table>
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:

<table>
  <tr><td>Zeile 1</td></tr>
  <tbody>
    <tr><td>Zeile 2</td></tr>
  </tbody>
    <tr><td>Zeile 3</td></tr>
</table>
Zeile 2 verstecken

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

No related posts.

Filed Under: Programmierung Tagged With: ,

Comments

  1. Stefan Knaak says:
    18. März 2010 at 13:35

    hehe, da sucht man bei google nach jquery zeile ausblenden und findet dich als ersten link..
    so klein ist die virtuelle welt. :)
    Gruß Stefan

    Antworten
  2. Latz says:
    19. März 2010 at 12:01

    LOL! Das ist wirklich lustig! Hoffe geholfen zu haben…

    Antworten
  3. Andreas K. says:
    30. Juli 2011 at 12:54

    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

    Antworten
  4. Andreas K. says:
    30. Juli 2011 at 13:01

    statt inline ‚block‘

    Antworten
  5. Webentwicklung says:
    7. Dezember 2011 at 21:24

    Hi,

    wieso setzt ihr nicht einfach eine id=“zeileX“ in das und versteckt es einfach mit $(“#zeileX“).hide() ? ;-)

    Antworten

Speak Your Mind

*