Tabelle zeilenweise ausblenden mit jQuery
March 11th, 2009 | 2 Comments | Filed in ProgrammierungMö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 id="test"> <tr><td>Zeile 2</td></tr> </div> <tr><td>Zeile 3</td></tr> </table> <input type="checkbox" id="cb_test" name="cb_test" onClick="hideshow()"/>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 id="test"> <tr><td>Zeile 2</td></tr> </tbody> <tr><td>Zeile 3</td></tr> </table> <input type="checkbox" id="cb_test" name="cb_test" onClick="hideshow()"/>Zeile 2 verstecken
Laut HTML-Validator des W3C ist diese Lösung „HTML 4.01 Transitional“-valide.



