Tabelle: Anzeigefilter für Zellinhalte

Größere Tabellen werden schnell unübersichtlich. Mit diesem JavaScript ist es möglich, Zellinhalte direkt durch Anklicken ein- und/oder aus-zublenden.

Alle Zellen anzeigen

erste	zeile	mit	inhalt?
zweite	zeile	mit	inhalt
zweite	zeile	mit	inhalt
vierter	eintrag	in	zeile
zweite	zeile	doppelt	eingetragen
eine	zeile	ohne	inhalt?
keine	zeile	doppelt	eingetragen
das	ist	nicht	richtig
eine	zeile	zum	schluss

	Position in der html-Datei: head-Bereich
<script type="text/javascript"> <!-- var content = ""; var col = -1; function showAll() { content = ""; col = -1; filterRows(); } function filterRows() { var table = document.all ? document.all.aTable : document.getElementById('aTable'); for (var r = 0; r < table.rows.length; r++) if ( col < 0 \|\| table.rows[r].cells[col].innerText == content ) table.rows[r].style.display = ''; else table.rows[r].style.display = 'none'; } function c(cell) { col = cell.cellIndex; content = cell.innerText; filterRows(); } // don't change this comment! Please! //*************************************************************************** // table filter script - dirk pessarra http://www.pessarra.de //************************************************************************* // Description: This javascript can be used to filter rows with the same // cell content from a table. // // COPYRIGHT (C) 2002 Dirk Pessarra // THIS PROGRAM IS FREE SOFTWARE; YOU CAN REDISTRIBUTE IT AND/OR MODIFY IT // UNDER THE TERMS OF THE GNU GENERAL PUBLIC LICENSE AS PUBLISHED BY THE FREE // SOFTWARE FOUNDATION; EITHER VERSION 2 OF THE LICENSE, OR (AT YOUR OPTION) // ANY LATER VERSION. THIS PROGRAM IS DISTRIBUTED IN THE HOPE THAT IT WILLBE // USEFUL, BUT WITHOUT ANY WARRANTY; WITHOUT EVEN THE IMPLIED WARRANTY OF // MERCHANTABILITY OF FITNESS FOR A PARTICULAR PURPOSE. SEE THE GNU GENERAL // PUBLIC LICENSE FOR MORE DETAILS. // // YOU SHOULD HAVE RECEIVED A COPY OF THE GNU GENERAL PUBLIC LICENSE ALONG // WITH THIS PROGRAM; IF NOT, WRITE TO: // // THE FREE SOFTWARE FOUNDATION, INC., // 59 Temple Place - Suite 330, Boston, MA 02111-1307, USA // // Bugs/Comments: pessarra@gmx.de //*************************************************************************** //--> </script>

	Position in der html-Datei: body-Bereich; hier eine Beispieltabelle.
<p><a href="javascript:showAll()">Alle Zellen anzeigen</a></p> <table id="aTable" border="1" cellpadding="3" cellspacing="0" summary=""> <tr> <td onclick="c(this);">erste</td> <td onclick="c(this);">zeile</td> <td onclick="c(this);">mit</td> <td onclick="c(this);">inhalt?</td> </tr> <tr> <td onclick="c(this);">zweite</td> <td onclick="c(this);">zeile</td> <td onclick="c(this);">mit</td> <td onclick="c(this);">inhalt</td> </tr> <tr> <td onclick="c(this);">zweite</td> <td onclick="c(this);">zeile</td> <td onclick="c(this);">mit</td> <td onclick="c(this);">inhalt</td> </tr> <tr> <td onclick="c(this);">vierter</td> <td onclick="c(this);">eintrag</td> <td onclick="c(this);">in</td> <td onclick="c(this);">zeile</td> </tr> </table>

Quelle: www.perlunity.de/javascript/scripts/javascript_0377_main.shtml Bitte beachten: Keine Haftung für Inhalte fremder Internetseiten .

© 2003