Ergebnis 1 bis 9 von 9
  1. #1
    Freak78 ist offline Grünschnabel
    registriert
    30-10-2008
    Beiträge
    5

    Tabellenzeile verstecken und mit Javascript aufrufen?

    Hallo zusammen,

    ich bin auf der Suche nach einem Codeschnipsel... irgendwas wo ich mir die Lösung zu meinem Problem zusammenbauen kann. Hab leider von Javascript nicht viel Ahnung.

    Und nun zu dem was ich vorhabe.
    Ich möchte eine Tabelle schreiben... diese wird ziemlich lang. Da in einer Zeile zu viele Informationen stehen würden, möchte ich zu jedem Begriff 2 Zeilen machen. Allerdings soll die zweite Zeile so lange versteckt bleiben, bis man auf den Oberbegriff klickt, und dann erst soll die zweite Zeile angezeigt werden.

    Zum besseren Verständnis hier eine kleine Skizze:

    Die Zusatzinfos sollen ausgeblendet sein. Erst mit Click auf den "Begriff" soll der Rest der Tabelle "runterfahren", und die Zusatzinfos eingeblendet werden.

    Idealerweise soll auch nur immer eine Extra-Zeile eingeblendet sein, also wenn man die Infos zu einem anderen Begriff aufruft, soll die vorher geöffnete Zeile wieder verschlossen werden.

    Da die Tabelle wie gesagt ziemlich lang wird, wäre es unschön zu jeder Zeile einen 1000-Zeichen-Code zu machen. Deshalb die Frage, ob es möglich ist, die Funktion an sich in einem Javascript zu definieren, und das Ziel dann in jeder Zeile mit einer Variablen definieren und mit OnClick ausführen?

    Da ich wie gesagt nicht viel Ahnung von Javascript habe wäre ich dankbar, wenn mir jemand mit einem Codeschnipsel auf die Sprünge helfen könnte.

    Gruß
    Freak
    Geändert von Freak78 (30-10-2008 um 18:02 Uhr)

  2. #2
    tsseh ist offline Foren-Gott
    registriert
    19-05-2008
    Beiträge
    5.598

  3. #3
    ein schlauer ist offline Lounge-Member
    registriert
    18-08-2004
    Beiträge
    14.671

    AW: Tabellenzeile verstecken und mit Javascript aufrufen?

    Ich schätze mal, er sucht eher sowas: [Javascript ist Toll!] » Klapptabelle mit Javascript

  4. #4
    tsseh ist offline Foren-Gott
    registriert
    19-05-2008
    Beiträge
    5.598

    AW: Tabellenzeile verstecken und mit Javascript aufrufen?

    Zitat Zitat von ein schlauer Beitrag anzeigen
    Ich schätze mal, er sucht eher sowas: [Javascript ist Toll!] » Klapptabelle mit Javascript
    da kommt bei mir ein Fehler, aber ich denke, ich weiß was du meinst. http://forum.jswelt.de/javascript/43...tml#post276930 (Slide Out Menu OHNE MooTools etc.?)

  5. #5
    ein schlauer ist offline Lounge-Member
    registriert
    18-08-2004
    Beiträge
    14.671

    AW: Tabellenzeile verstecken und mit Javascript aufrufen?

    Zitat Zitat von hesst Beitrag anzeigen
    da kommt bei mir ein Fehler
    Was für ein Fehler?

  6. #6
    tsseh ist offline Foren-Gott
    registriert
    19-05-2008
    Beiträge
    5.598

    AW: Tabellenzeile verstecken und mit Javascript aufrufen?

    Zitat Zitat von ein schlauer Beitrag anzeigen
    Was für ein Fehler?
    Zeile 70 'marker' is undefined im IE6
    mit FF - gehts.

  7. #7
    Freak78 ist offline Grünschnabel
    registriert
    30-10-2008
    Beiträge
    5

    AW: Tabellenzeile verstecken und mit Javascript aufrufen?

    Zitat Zitat von ein schlauer Beitrag anzeigen
    Ich schätze mal, er sucht eher sowas: [Javascript ist Toll!] » Klapptabelle mit Javascript
    Suuuper, danke... das ist genau das, was ich gesucht habe.
    Dann werde ich es mir mal zurecht basteln.

    Gruß
    Freak

  8. #8
    Freak78 ist offline Grünschnabel
    registriert
    30-10-2008
    Beiträge
    5

    AW: Tabellenzeile verstecken und mit Javascript aufrufen?

    Jetzt hätte ich doch nochmal ne Frage zu dem ganzen...

    Der Link, den Du oben gepostet hast bringt mich schon ein ganzes Stück weiter.
    Könnte mir aber jedem helfen, den code etwas zu optimieren?

    Im Aktuellen Code muss man in jeder Zeile eine leere Zelle lassen, in die eine Grafik eingefügt wird.
    Jetzt hätte ich es gerne so, dass das Wort, dass in der jeweils ersten Zelle steht in einen Link umgewandelt wird (oder ich kann es jeweils gleich als Link schreiben, nur mit welchem "a href"?
    Und wie kann es dauerhaft aktivieren, dass jeweils nur eine Zeile geöffnet wird, also alle geöffneten geschlossen werden, sobald man etwas anklickt?

    Code:
    function KlappTabelle(t) {
    	var obj = t;
    	var rows = [];
    	var self = this;
    
    	self.doCloseAll = false;
    	self.onopen = self.onclose = function() {};
    	
    	self.hideAll = function() {
    		for(var i = 0; i < rows.length;i++) rows[i].hide();
    	};
    	self.showAll = function() {
    		var tmp = self.doCloseAll;
    		for(var i = 0; i < rows.length;i++) {
    			rows[i].show();
    			self.doCloseAll = false;
    		}
    		self.doCloseAll = tmp;
    	};
    	
    	function init() {
    		var r = obj.getElementsByTagName('tr');
    		var akt = null;
    		for(var i = 0; i < r.length; i++) {
    			if( (r[i].className || '') == KlappTabelle.className) { 
    				if(akt && !akt.rows()) akt.disable();
    				// Eine neue Hauptreihe initialisieren
    				akt = new Part(r[i], self);
    				rows.push( akt );
    			} else if(akt) akt.addRow( r[i] );
    		}
    		self.hideAll()
    	}
    	
    	if(obj) init();
    	
    	////////////////////////////////////////////
    	/*
    	privates Objekt: Part(row, parent)
    	
    	Parameter:
    	row: 		Die Reihe unter der ausgeblendet werden soll
    	parent: 	Das Objekt/Tabelle das die Reihe erzeugt
    	
    	Funktionen:
    	addRow()
    	rows()
    	show()
    	hide()
    	disable()
    	*/
    	////////////////////////////////////////////
    	function Part(row, parent) {
    		var self = this;	// Zeiger auf das Objekt
    		var open = true;	// Flag
    		var rows = [];		// Die Reihen die "ein- und ausgeklappt" werden
    		
    		// anklickbare Grafik zum klappen erzeugen und in die erste Spalte einfügen
    		var m = new Image(); //document.createElement('img'); 
    		m.src = KlappTabelle.marker;
    		row.cells[0].insertBefore(m, row.cells[0].firstChild);
    		m.style.cursor = 'pointer';
    		m.onmouseover = function() {
    			var i = this.src.lastIndexOf('.');
    			this.src = this.src.substring(0, i) +
    			'-invers' + this.src.substring(i);
    		};
    		m.onmouseout = function() {
    			this.src = this.src.replace(/-invers/, '');
    		};
    		m.onclick = function() {
    			if(open) self.hide(); else self.show();
    		};
    
    		// Funktionen
    		this.addRow = function(r) { rows[rows.length] = r;};
    		this.rows = function() {return rows.length;};
    		this.show = function() {
    			if(parent.doCloseAll) parent.hideAll();
    			if(parent.onopen(parent, row) == false) return false;
    			for(var i = 0; i < rows.length; i++) rows[i].style.display = '';
    			m.src = m.src.replace(/-auf/, '-zu');
    			open = true;
    			return true;
    		};
    		
    		this.hide = function() {
    			if(!parent.onclose(parent, row) == false) return false;
    			for(var i = 0; i < rows.length; i++) rows[i].style.display = 'none';
    			m.src = m.src.replace(/-zu/, '-auf');
    			open = false;
    			return true;
    		};
    		
    		this.disable = function() {
    			m.onmouseover = m.onmouseout = 
    			m.onclick = function() {};
    			var tmp = m.src.replace(/-zu/, '-grey')
    			m.src = tmp;
    			m.style.cursor = '';
    		};
    	}
    }
    KlappTabelle.init = function(callback) {
    	// prüfen ob die Bilder vorhanden sind.
    	var img = new Image();
    	img.onerror = function() {
    		alert('Die Bilder fehlen!\n\nEntweder sind sie an der falschen Stelle oder sie wurden vergessen.\n\nEs wurde versucht:' + this.src + ' zu laden.');
    	}
    	img.onload = function() {
    		// Bilder vorladen?
    		if(KlappTabelle.preload) {
    			var tmp_1 = new Image();
    			var i = this.src.lastIndexOf('.');
    			tmp_1.src = this.src.substring(0, i) + '-invers' + this.src.substring(i);
    			var tmp_2 = new Image();
    			tmp_2.src = this.src.replace(/-zu/, '-auf');
    			var tmp_3 = new Image();
    			tmp_3.src = this.src.replace(/-zu/, '-grey');
    		}
    	}
    	img.src = KlappTabelle.marker;
    	
    	
    	// Alle Tabellen des Dokuments
    	var t = document.getElementsByTagName('table');
    	var r = /\bklapptabelle\b/i;
    	for(var i = 0; i < t.length; i++) if(t[i].className && r.test(t[i].className)) {
    		var tmp = new KlappTabelle(t[i]);
    		if(callback) callback(tmp);
    	}
    };
    
    KlappTabelle.className = 'main';
    KlappTabelle.preload = true;
    KlappTabelle.marker = 'bilder/pfeil-zu.gif';
    Es wird in meiner Tabelle keine Zeile sein ohne Zusatzinfos... dadurch kann ein großer Teil des Codes wegfallen.
    Eine nette Zusatzfunktion wäre, dass der Link, der gerade aktiv ist, farblich geändert wird.

    Sorry dass ich mir nicht mehr selbst helfen kann... danke schonmal im voraus.

    Gruß
    Freak

  9. #9
    cybaer ist offline Kaiser
    registriert
    12-09-2006
    Beiträge
    1.338

    AW: Tabellenzeile verstecken und mit Javascript aufrufen?

    Zitat Zitat von hesst Beitrag anzeigen
    Zeile 70 'marker' is undefined im IE6
    mit FF - gehts.
    Ich habe aktuell ein "Zeile 69 - 'm' ist undefiniert" zu bieten (IE 6/SP3).
    Gruß, Cybaer

Ähnliche Themen

  1. Javascript durch Link auf 2. Seite ausführen??
    Von Bass-T im Forum JavaScript
    Antworten: 4
    Letzter Beitrag: 27-06-2008, 12:35
  2. Webservice mit JavaScript aufrufen
    Von gerritlober im Forum JavaScript
    Antworten: 2
    Letzter Beitrag: 16-06-2008, 17:24
  3. Antworten: 3
    Letzter Beitrag: 27-07-2006, 16:59
  4. javascript im body neu aufrufen
    Von just2b im Forum JavaScript
    Antworten: 12
    Letzter Beitrag: 19-04-2006, 09:35
  5. hilfe bei javascript
    Von frank2000 im Forum JavaScript
    Antworten: 0
    Letzter Beitrag: 17-01-2005, 20:33

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •