Aufklappbare Tabelle mit Javascript
- Themenstarter mysai
- Beginndatum
Sven Mintel
Mitglied
Moin mysai,
könntest du bitte mal den Quelltext posten, den dein JSP-kript erzeugt?
könntest du bitte mal den Quelltext posten, den dein JSP-kript erzeugt?
Sven Mintel
Mitglied
Inwiefern bist du daran gebunden, diese Daten mit einer Tabelle darzustellen?
Weshalb ich frage?
für das, was du vorhast, wäre eine entsprechend deiner Datenstruktur vershachtelte <ul> wesentlich besser geeignet.
Weshalb ich frage?
für das, was du vorhast, wäre eine entsprechend deiner Datenstruktur vershachtelte <ul> wesentlich besser geeignet.
Hallo,
leider benötige ich die Tabelle.
Es ist eine Aufzählung von Bauteilen, bei der man nach Spalten sortieren kann und ich brauche für diese Sortierung die Schachtelung nach Modell.
Kann man nicht irgendwie diese Zeilen anhand ihrer ID heraussuchen und ihre Display-Eigenschaft umstellen?
EDIT: Wenn mir vielleicht noch jemand sagen könnte, wie ich aus einem Element auf eine ID prüfen könnte wäre ich sehr glücklich
Das Problem dabei wäre nur, dass ich anhand einer Wildcard, also "*", prüfen müsste, ob die ID passt.
Hatte mir das so in etwa vorgestellt:
leider benötige ich die Tabelle.
Es ist eine Aufzählung von Bauteilen, bei der man nach Spalten sortieren kann und ich brauche für diese Sortierung die Schachtelung nach Modell.
Kann man nicht irgendwie diese Zeilen anhand ihrer ID heraussuchen und ihre Display-Eigenschaft umstellen?
EDIT: Wenn mir vielleicht noch jemand sagen könnte, wie ich aus einem Element auf eine ID prüfen könnte wäre ich sehr glücklich
Das Problem dabei wäre nur, dass ich anhand einer Wildcard, also "*", prüfen müsste, ob die ID passt.
Hatte mir das so in etwa vorgestellt:
Code:
if(aElement[i].Id == "*h*l*o"){
...
}
Zuletzt bearbeitet:
Hi,
du könntest es mit regulären Ausdrücken verwenden. Hierzu übergibst du ein Suchmuster an die Toggle-Routine. Dort wird daraus ein regulärer Ausdruck generiert, der zum Testen dient.
Beispiel:
Vielleicht hilft dir das weiter.
Ciao
Quaese
du könntest es mit regulären Ausdrücken verwenden. Hierzu übergibst du ein Suchmuster an die Toggle-Routine. Dort wird daraus ein regulärer Ausdruck generiert, der zum Testen dient.
Beispiel:
Code:
<html>
<head>
<title>www.tutorials.de</title>
<meta name="author" content="Quaese">
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
<!--
function toggle(strPattern, _this){
// Suchmuster generieren
var strP = new RegExp(strPattern);
// Kollektion aller Tabellenzeilen
var arrTR = document.getElementById("tableID").getElementsByTagName("tr");
// Tabellenzeilen durchlaufen
for(var i=0; i<arrTR.length; i++){
// Falls es sich nicht um das auslösende Element handelt UND die ID dem Suchkriterium entspricht
if((arrTR[i] != _this) && (arrTR[i].id.search(strP) != -1)){
// Ansicht toggeln
if(arrTR[i].style.display == "none")
arrTR[i].style.display = "";
else
arrTR[i].style.display = "none";
}
}
}
window.onload = function(){
var arrTR = document.getElementById("tableID").getElementsByTagName("tr");
for(var i=0; i<arrTR.length; i++){
if(arrTR[i].id != "klapper"){
arrTR[i].style.display = "none";
}
}
}
//-->
</script>
</head>
<body>
<table id="tableID">
<tr id="klapper" onclick="toggle('1.00', this);"><td>1000 (top)</td></tr>
<tr id="1000" onclick="toggle('10.0', this);"><td> 1000</td></tr>
<tr id="1010"><td> 1010</td></tr>
<tr id="1020"><td> 1020</td></tr>
<tr id="1100" onclick="toggle('11.0', this);"><td> 1100</td></tr>
<tr id="1110"><td> 1110</td></tr>
<tr id="1120"><td> 1120</td></tr>
<tr id="1130"><td> 1130</td></tr>
<tr id="1200" onclick="toggle('12.0', this);"><td> 1200</td></tr>
<tr id="1210"><td> 1210</td></tr>
<tr id="1220"><td> 1220</td></tr>
<tr id="1230"><td> 1230</td></tr>
<tr id="klapper" onclick="toggle('2.00', this);"><td>2000 (top)</td></tr>
<tr id="2000" onclick="toggle('20.0', this);"><td> 2000</td></tr>
<tr id="2010"><td> 2010</td></tr>
<tr id="2020"><td> 2020</td></tr>
<tr id="2100" onclick="toggle('21.0', this);"><td> 2100</td></tr>
<tr id="2110"><td> 2110</td></tr>
<tr id="2120"><td> 2120</td></tr>
<tr id="2130"><td> 2130</td></tr>
<tr id="2200" onclick="toggle('22.0', this);"><td> 2200</td></tr>
<tr id="2210"><td> 2210</td></tr>
<tr id="2220"><td> 2220</td></tr>
<tr id="2230"><td> 2230</td></tr>
</table>
</body>
</html>Vielleicht hilft dir das weiter.
Ciao
Quaese
Hi,
vielen Dank!
Hab das jetzt mal bei mir eingefügt und angepasst und habe leider noch ein Problem.
Wenn ich jetzt an folgendem Punkt bin:
Dann blendet er mir bei einem Klick auf Modell das Modell selbst aus und sämtliche Unterpunkte ebenso.
vielen Dank!
Hab das jetzt mal bei mir eingefügt und angepasst und habe leider noch ein Problem.
Wenn ich jetzt an folgendem Punkt bin:
Code:
Modell
Bereich<- hier bin ich/klick ich
Bauteil
Eintrag
Eintrag
Bauteil
Eintrag
Eintrag
...
Zuletzt bearbeitet:
Hi,
es handelt sich bei meinem Beispiel auch weniger um eine Musterlösung für dein Problem als um eine Verdeutlichung, wie die Lösung aussehen könnte.
So sind in meinem Beispiel die onclick-Events im tr-Element notiert. Damit ist es mir möglich, zu entscheiden, dass auslösende Element (this) nicht mit zu schliessen.
Bei dir wird die Routine in Links angestossen. Entweder du hangelst dich bis zum tr-Element durch den Dokumentenbaum nach oben oder notierst die onlick-Events in den jeweiligen Zeilenelementen.
Weiterhin möchte ich anmerken, dass IDs innerhalb eines Dokuments eindeutig sein müssen.
Ciao
Quaese
es handelt sich bei meinem Beispiel auch weniger um eine Musterlösung für dein Problem als um eine Verdeutlichung, wie die Lösung aussehen könnte.
So sind in meinem Beispiel die onclick-Events im tr-Element notiert. Damit ist es mir möglich, zu entscheiden, dass auslösende Element (this) nicht mit zu schliessen.
Bei dir wird die Routine in Links angestossen. Entweder du hangelst dich bis zum tr-Element durch den Dokumentenbaum nach oben oder notierst die onlick-Events in den jeweiligen Zeilenelementen.
Weiterhin möchte ich anmerken, dass IDs innerhalb eines Dokuments eindeutig sein müssen.
Ciao
Quaese
Hi,
so, hat jetzt mit dem Anzeigen erstmal alles geklappt. Vielen Dank nochmal.
Habe jetzt nurnoch das Problem, dass man beim Schließen der Tabellenebenen, wenn man nicht genau die Überliegende schließt, sondern eine Ebene auslässt, nicht alle Unterebenen ausgeblendet werden.
Habe es im Moment damit gelöst, dass ich beim Schließen einer Ebene einfach alle Ebenen schließe, aber das ist ja auch keine Lösung.
Vll. hat da noch jemand ne Idee.
so, hat jetzt mit dem Anzeigen erstmal alles geklappt. Vielen Dank nochmal.
Habe jetzt nurnoch das Problem, dass man beim Schließen der Tabellenebenen, wenn man nicht genau die Überliegende schließt, sondern eine Ebene auslässt, nicht alle Unterebenen ausgeblendet werden.
Habe es im Moment damit gelöst, dass ich beim Schließen einer Ebene einfach alle Ebenen schließe, aber das ist ja auch keine Lösung.
Vll. hat da noch jemand ne Idee.
Zuletzt bearbeitet:
Hi,
du könntest für den Fall, dass Zweige eingeklappt werden sollen, die zugehörigen Suchmuster dynamisch anpassen. Soll heissen, ab dem bereits existierenden Punkt werden die Suchmuster bis zum Stringende mit weiteren Punkten aufgefüllt.
In meinem zuerst geposteten Code, könntest du das mit folgendem angepassten Script erreichen.
Ciao
Quaese
du könntest für den Fall, dass Zweige eingeklappt werden sollen, die zugehörigen Suchmuster dynamisch anpassen. Soll heissen, ab dem bereits existierenden Punkt werden die Suchmuster bis zum Stringende mit weiteren Punkten aufgefüllt.
In meinem zuerst geposteten Code, könntest du das mit folgendem angepassten Script erreichen.
Code:
function toggle(strPattern, _this){
// Suchmuster generieren
var strP = new RegExp(strPattern);
// Kollektion aller Tabellenzeilen
var arrTR = document.getElementById("tableID").getElementsByTagName("tr");
var blnCheck = true;
// Tabellenzeilen durchlaufen
for(var i=0; i<arrTR.length; i++){
// Falls es sich nicht um das auslösende Element handelt UND die ID dem Suchkriterium entspricht
if((arrTR[i] != _this) && (arrTR[i].id.search(strP) != -1)){
// Ansicht toggeln
if(blnCheck && (arrTR[i].style.display == "none"))
arrTR[i].style.display = "";
else{
// Falls Elemente eingeklappt werden sollen
if(blnCheck){
// Position des Punkts im Suchmuster ermitteln
var intI = strPattern.search(/\./);
// Neues Suchmuster generieren (bis zum Punkt)
var strNewP = strPattern.substr(0,intI);
// Rest des Suchmusters mit Punkten auffüllen
for(var j=intI; j<strPattern.length; j++)
strNewP += ".";
// Neues regulären Ausdruck generieren
strP = new RegExp(strNewP);
// Flag setzen, um zu vermeiden, dass if-Zweig häufiger durchlaufen wird UND
// als Kriterium in übergeordneter if-Anweisung, um sicherzustellen,
// dass Unterkategorien auch tatsächlich geschlossen bleiben
blnCheck = false;
}
arrTR[i].style.display = "none";
}
}
}
}Ciao
Quaese
