JavaScript Spalten in Tabelle ein-/ausblenden lassen

rony12 · 16. März 2012

Hallo,

nachdem mir hier schon häufig geholfen wurde, frag ich mal wieder

Bei uns wird eine Inventarliste geführt, welche nach speziellen Suchkriterien tabellarisch angezeigt wird.

Der der das alles damals gebaut hat, ist mittlerweile nicht mehr bei uns beschäftigt, und so sollte ich das einpflegen von Verbesserungen übernehmen.

Ich dachte nun daran, dass man sich nach dem Klick in eine Checkbox Tabellenspalten anzeigen lassen kann oder eben nicht.

Die Tabelle hat insgesamt 13 Spalten, und es würde der Übersicht dienen wenn, man gerade nicht so wichtige spalten ausblenden lassen würde.

Nun war mein erster Gedanke, per Default unsichtbar zu machen (display:none; ) und dann nach dem Klick auf die Checkbox würde es eingeblendet werden.

Ein anderer Gedanke war, die Tabelle gleich mittels JavaScript aufzubauen.

Nun ist es aber so, teilweise befinden sich weit über 1000 Zeilen in der Tabelle, und es braucht eine kleine Zeit, bis die Tabelle vom Browser aufgebaut wurde. Nach dem klicken in die Checkbox, ob nun eine Spalte ausgelbendet werden soll, sollte die Tabelle nicht nochmal neu aufgebaut werden.
Und es sollte so sein, dass man wenn man die Suchanfrage startet, auswählen kann welche spalte angezeigt werden soll, oder nicht, das sollte aber eben auch im Nachhinein zu ändern sein, wenn alles schon angezeigt wird.

Meine Güte.... Viel Text um nichts

Hättet ihr da Ideen?
Ggf. Auch Codebeispiele? Weil ich bin in der Sache echt keine leuchte, und mache das gerade so learning bei doing.

----
Bissel was anderes....

Gibt es ggf. auch eine Möglichkeit die Tabelle Segment weise zu laden? Also wenn jetzt 600 Spalten gerendert werden müssten, dass der php query zwar durchgelaufen ist, aber die Tabelle nur nach Bedarf gerendert wird - z.b. während des Runterscrollens? - Weil wie gesagt, es braucht teilweise sehr lang die Tabelle aufzubauen.

Lawnmower · 16. März 2012

mal mit sowas probieren?
http://www.devcurry.com/2009/07/hide-table-column-with-single-line-of.html

ManOki · 16. März 2012

die meiste zeit wird wohl beim server draufgehen, die daten zusammen zusammeln. daher würde es nicht viel zeitersparnis bringen, diese trotzdem zu sammen, zu übertragen und dann nicht anzuzeigen.

nichts desto trotz: du kannst eine tabelle per javascript einfach durch iterieren. jedes element, wie <table> hat entsprechende child elemente <tr> und die wiederum <td>. so kannst du jede zelle erreichen und diese ausblenden.

alternativ kannst du auch bei beginn jede zelle entsprechend ihrer spalte mit einer css class versehen und diese dann entsprechend mit optionen versehen.

SaxnPaule · 16. März 2012

Vergib jeder Spalte eine andere CSS Klasse und aendere bei Klick in der Checkbox den Style dieser Klasse.

rony12 · 17. März 2012

mmmh,

also das script welches "Lawnmower" erwähnt hat, funktioniert - nur bedingt :/

ich habe die auswahl auch mit zwei tabellen nebeneinander zeichen lassen, wenn ich nun testweise einen button klicke, dann werden auch dort die zweite spalte ausgelebendet....

ich versuchte dann eine id zu geben (.testspalte), aber auch das funktionierte nicht...

Desweiteren weiß ich nicht, wie ich das nun von einem button auf eine checkbox bekomme ^^
Bin da aktuell noch am probieren :/

---

Edit:

Mittlerweile hab ich es rumprobiert...
Ich denke mal man kann es lesen

Mein vorhaben war jetzt erstmal, die class mit dem selben namen ein und ausblenden zu lassen - funktioniert leider nicht, mit der id aber schon :/

HTML:

<html>
<head>
<title>Test</title>
<script src="http://code.jquery.com/jquery-1.7.1.min.js"
    type="text/javascript"></script>
    <script type="text/javascript">
        <!--
        function ShowHide(class) {
            obj = document.getElementsByTagName("td");
            obj[class].style.display = 'none';
        }
        
        function ShowHide(id) {
            obj = document.getElementsByTagName("tr");
            obj[id].style.display = 'none';
        }
        //-->
        </script>
</head>
<body>

<table id="tableone" border="1">
    <tr id="eins">
        <td class="col_eins">Row 0 Column 0</td>
        <td class="col_zwei" >Row 0 Column 1</td>
        <td class="col_drei" >Row 0 Column 2</td>
    </tr>
    <tr id="zwei" class="del">
        <td class="col_eins">Row 1 Column 0</td>
        <td class="col_zwei">Row 1 Column 1</td>
        <td class="col_drei">Row 1 Column 2</td>
    </tr>
    <tr id="drei" class="del">
        <td class="col_eins">Row 2 Column 0</td>
        <td class="col_zwei">Row 2 Column 1</td>
        <td class="col_drei">Row 2 Column 2</td>
    </tr>
    <tr id="vier" class="del">
        <td class="col_eins">Row 3 Column 0</td>
        <td class="col_zwei">Row 3 Column 1</td>
        <td class="col_drei">Row 3 Column 2</td>
    </tr>
     <tr id="fünf" class="del">
        <td class="col_eins">Row 4 Column 0</td>
        <td class="col_zwei">Row 4 Column 1</td>
        <td class="col_drei">Row 4 Column 2</td>
    </tr>
     <tr id="vier" class="del">
        <td class="col_eins">Row 5 Column 0</td>
        <td class="col_zwei">Row 5 Column 1</td>
        <td class="col_drei">Row 5 Column 2</td>
    </tr>
</table>

        <a onclick="ShowHide('eins'); return false;">1</a></br>
        <a onclick="ShowHide('zwei'); return false;">2</a></br>
        <a onclick="ShowHide('drei'); return false;">3</a></br>
        <a onclick="ShowHide('vier'); return false;">4</a></br>
        <a onclick="ShowHide('fünf'); return false;">5</a></br>
        <a onclick="ShowHide('sechs'); return false;">6</a>
        
        </br></br></br>
        
        <a onclick="ShowHide('col_eins'); return false;">col 1</a>
        <a onclick="ShowHide('col_zwei'); return false;">col 2</a>
        <a onclick="ShowHide('col_drei'); return false;">col 3</a>

</body>
</html>

UnKnOwN_86 · 18. März 2012

Du solltest auch JQuery verwenden, wennst du es schon einbindest...
$("td." + class).hide(); oder gleich $("td." + class).toggle(); fallst wieder sichtbar machen willst

Edit:
Warum wird kein Grid verwendet?

rony12 · 18. März 2012

schonmal vielen dank...

Grid sagt mir jetzt nix

Wie gesagt, ich stelle mir eine Aufgabe und versuche diese dann so gut wie möglich zu lösen, und dabei zu lernen.
Bei lernen von aufgaben/beispielen fehlt mir immer irgendwie die motivation.

Unsere inventarliste funktioniert ja, nur wollte ich die von der benutzerfreundlichkeit nun etwas aufbohren

auch bei deiner hilfestelleung komm ich jetzt gedanklich noch nicht so weit...
ich denke mal, da werd ich noch etwas tüfteln müssen ^^

jquery hatte ich noch von einer vorherigen sache drin, die ich ausprobiert hatte....

UnKnOwN_86 · 18. März 2012

Mit grid meine ich soetwas
http://phpgrid.com/ (Über google findest wesentlich mehr beispiele)

Ist im Grunde eine Tabelle mit sehr vielen nützlichen Funktionen, wie zum Beispiel: Sortieren, Seitenwechsel, Gruppieren, Filtern... usw... Diesem Grid übergibt man dann eine Datenquelle und kann dann Spalten definieren wie man möchte. Vorallem wäre dadurch das langsame laden beseitigt, da die Grids dies bereits behandeln und nur den Inhalt der jeweiligen Seite darstellt.

Erklärung zu meinem Code:
$("td." + class).toggle(); Dies ist ein Selektor aufruf von allen "TD" Elementen in der HTML Datei dessen CSS-Klasse der variable class entspricht zB col_eins aus deinem Beispiel. Mit der Methode .toggle(); wird zwischen display: none; und display: block/inline; hin und her gewechselt.

rony12 · 18. März 2012

diese grid geschichte sieht wirklich sehr gut aus

ich glaube darüber werd ich mal nachdenken..., jedoch kostet es eine gewisse summe, und unsere inventarliste sollte möglichst kein geld kosten.

Meine Vorgesetzten haben da schon eine fertige Software am Anschlag, ich würde jedoch die Webbasiernde Lösung weiter ausbauen.
Wenn also Kosten dazu kommen sollten, dann wird auf eine Desktopsoftware zurückgegriffen...

Danke für die für die erklärung.

Das hatte ich auch schon soweit verstanden, nur weiß ich gerade nicht, wie ich das konkret einbauen sollte....
Tut mir leid, dass ich schon fast mund zu mundbeartmung will, aber wenn man häufig nicht in einer gewissen zeit eine lösung hat, dann verliehrt man die lust daran, und gibt sich mit weniger zufrieden....

rony12 · 19. März 2012

Da mach ich mal einen fiesen doppelpost

edit: ich ziehe den unten stehenden Text zurück ^^ - "click" kann stehen bleiben....

Nun, ich habe mir nochmals das von "Lawnmower" durch den kopf gehen lassen.

Das Problem, konnte ich etwas eindämmen, in dem ich die Suchanfrage, die ich erst in eine tabelle geschrieben habe, nun nochmal aus div elementen neu gebaut habe.

Auch das mit dem ein und ausblenden konnte ich mit dem tipp von "UnKnOwN_86" umsetzten.
Ich habe einfach toggle eingebaut ^^

Nun kann ich mit button alle drei spalten seperat voneinander ein und ausblenden lassen.
Ich würde das aber gerne mit Checkboxen machen.
Nun dachte ich, schreibe ich statt "click" einfach ein "check" rein, das funktioniert leider nicht.

Hier der Code:

HTML:

<script src="jquery-1.7.1.js"
    type="text/javascript"></script>
    
    <script type="text/javascript">
        $(document).ready(function() {
            $('#btnHide1').checked(function() {
                $('td:nth-child(1)').toggle();        
            });
        });
        $(document).ready(function() {
            $('#btnHide2').click(function() {
                $('td:nth-child(2)').toggle();
            });
        });
        $(document).ready(function() {
            $('#btnHide3').click(function() {
                $('td:nth-child(3)').toggle();        
            });
        });
    </script>    
</head>
    <body>
        
        <table id="tableone" border="1">
    <tr class="del">
        <td>Row 0 Column 0</td>
        <td >Row 0 Column 1</td>
        <td >Row 0 Column 2</td>
    </tr>
    <tr class="del">
        <td>Row 1 Column 0</td>
        <td>Row 1 Column 1</td>
        <td>Row 1 Column 2</td>
    </tr>
    <tr class="del">
        <td>Row 2 Column 0</td>
        <td>Row 2 Column 1</td>
        <td>Row 2 Column 2</td>
    </tr>
    <tr class="del">
        <td>Row 3 Column 0</td>
        <td>Row 3 Column 1</td>
        <td>Row 3 Column 2</td>
    </tr>
     <tr class="del">
        <td>Row 4 Column 0</td>
        <td>Row 4 Column 1</td>
        <td>Row 4 Column 2</td>
    </tr>
     <tr class="del">
        <td>Row 5 Column 0</td>
        <td>Row 5 Column 1</td>
        <td>Row 5 Column 2</td>
    </tr>
</table>
    
    <input id="btnHide1" type="checkbox" value="Hide Column 1"/>
    <input id="btnHide2" type="button" value="Hide Column 2"/>
    <input id="btnHide3" type="button" value="Hide Column 3"/>
    
    </body>
</html>

Wie kann ich nun die Checkbox in echtzeit abfragen?

Danke

UnKnOwN_86 · 23. März 2012

Das event das du suchst heißt change.

Suche

JavaScript Spalten in Tabelle ein-/ausblenden lassen

rony12

Commodore Pro

Lawnmower

Maître de cuisine Pro

ManOki

Lt. Commander

SaxnPaule

Fleet Admiral

rony12

Commodore Pro

UnKnOwN_86

Ensign

rony12

Commodore Pro

UnKnOwN_86

Ensign

rony12

Commodore Pro

rony12

Commodore Pro

UnKnOwN_86

Ensign

Ähnliche Themen