Ergebnis 1 bis 13 von 13
  1. #1
    chappy_berlin ist offline Eroberer
    registriert
    09-04-2010
    Beiträge
    55

    dynamische Tabelle mit onclick(event)

    Hallo Leute!

    Das folgende Script (AJAX Modul) lößt die Daten aus der PHP Website aus und packt sie in eine Tabelle. Funktioniert alles super!

    Code:
    function starttable()
    {
    var http = null;
    if (window.XMLHttpRequest) {
       http = new XMLHttpRequest();
    	} else if (window.ActiveXObject) {
       http = new ActiveXObject("Microsoft.XMLHTTP");
    }
    if (http != null) {
       http.open("POST", "katalog_katalogdaten.php", true);
       http.onreadystatechange = ausgeben;
       http.setRequestHeader(
          "Content-Type", 
          "application/x-www-form-urlencoded");
       http.send("pagekennung=1");
    }
    
    	function ausgeben() 
    	{
    	   if (http.readyState == 4) 
    	   {
    		 //document.getElementById("Ausgabe").innerHTML = http.responseText;
             var tbdaten = http.responseText;
             var tbdatenarraysplitt=tbdaten.split('<br>');
    		 var tbdatenarraysplittelemente=(tbdatenarraysplitt.length-1);
    		 //var tbdatensplitarray = tbdatenarraysplitt.split(';_;');
    		 
    		  //Definiert eine Funktion
                var Zeile =1;
                var x=0;
                while(Zeile<=tbdatenarraysplittelemente)
                //Aufbereitung des Arrays
    			//Startet eine Schleife um die Anweisung mehrmals zu wiederholen
                {
    			//Aufbereitung des Arrays	
    			var tbdatensplitarray = tbdatenarraysplitt[x].split(';_;');
    				
                var TR = document.getElementById("datatable").insertRow(Zeile);
                //Fügt eine Zeile in die Tabelle ein
                var TD1 = document.createElement("td");
                //Erstellt eine Zelle
                var TD1text = document.createTextNode(x+1);
                //Erstellt einen Text-Knoten für den Zelleninhalt
                TD1.appendChild(TD1text);
                //Schreibt den Knoten in die Zelle
                TR.appendChild(TD1);
                //Fügt die erste Zelle hinzu
    
                var TD2 = document.createElement("td");
                //Erstellt eine weitere Zelle
                var TD2text = document.createTextNode(tbdatensplitarray[0]);
                //Erstellt einen Text-Knoten für den Zelleninhalt
                TD2.appendChild(TD2text);
                //Schreibt den Knoten in die Zelle
                TR.appendChild(TD2);
                //Fügte die zweite Zelle hinzu
    
                var TD3 = document.createElement("td");
                //Erstellt eine weitere Zelle
                var TD3text = document.createTextNode(tbdatensplitarray[1]);
                //Erstellt einen Text-Knoten für den Zelleninhalt
                TD3.appendChild(TD3text);
                //Schreibt den Knoten in die Zelle
                TR.appendChild(TD3);
                //Fügte die zweite Zelle hinzu
    
                var TD4 = document.createElement("td");
                //Erstellt eine weitere Zelle
                var TD4text = document.createTextNode(tbdatensplitarray[2]);
                //Erstellt einen Text-Knoten für den Zelleninhalt
                TD4.appendChild(TD4text);
                //Schreibt den Knoten in die Zelle
                TR.appendChild(TD4);
                //Fügte die zweite Zelle hinzu
    
                var TD5 = document.createElement("td");
                //Erstellt eine weitere Zelle
                var TD5text = document.createTextNode(tbdatensplitarray[3]);
                //Erstellt einen Text-Knoten für den Zelleninhalt
                TD5.appendChild(TD5text);
                //Schreibt den Knoten in die Zelle
                TR.appendChild(TD5);
                //Fügte die zweite Zelle hinzu
    			
    			var TD6 = document.createElement("td");
                //Erstellt eine weitere Zelle
                var TD6text = document.createTextNode(tbdatensplitarray[4]);
                //Erstellt einen Text-Knoten für den Zelleninhalt
                TD6.appendChild(TD6text);
                //Schreibt den Knoten in die Zelle
                TR.appendChild(TD6);
                //Fügte die zweite Zelle hinzu
    
    			var TD7 = document.createElement("td");
                //Erstellt eine weitere Zelle
                var TD7text = document.createTextNode(tbdatensplitarray[5]);
                //Erstellt einen Text-Knoten für den Zelleninhalt
                TD7.appendChild(TD7text);
                //Schreibt den Knoten in die Zelle
                TR.appendChild(TD7);
                //Fügte die zweite Zelle hinzu
    
    			var TD8 = document.createElement("td");
                //Erstellt eine weitere Zelle
                var TD8text = document.createTextNode(tbdatensplitarray[6]);
                //Erstellt einen Text-Knoten für den Zelleninhalt
                TD8.appendChild(TD8text);
                //Schreibt den Knoten in die Zelle
                TR.appendChild(TD8);
                //Fügte die zweite Zelle hinzu
    			
    			var TD9 = document.createElement("td");
                //Erstellt eine weitere Zelle
                var TD9text = document.createTextNode(tbdatensplitarray[7]);
                //Erstellt einen Text-Knoten für den Zelleninhalt
                TD9.appendChild(TD9text);
                //Schreibt den Knoten in die Zelle
                TR.appendChild(TD9);
                //Fügte die zweite Zelle hinzu
    			
    			var TD10 = document.createElement("td");
                //Erstellt eine weitere Zelle
                var TD10text = document.createTextNode(tbdatensplitarray[8]);
                //Erstellt einen Text-Knoten für den Zelleninhalt
                //TD10.onclick=test();
                TD10.appendChild(TD10text);
                //Schreibt den Knoten in die Zelle
                TR.appendChild(TD10);
                //Fügte die zweite Zelle hinzu
    
                Zeile += 1;
                x++;
                //Erhöht die Variable für die Aufzählung
                }
    	   }
    	}
    }
    Jetzt mein großes Problem!

    Ich möchte Felder, speziel das neunte und zehnte anklicken können um dann eine Datenänderung vornehmen zu können. Also es soll eine bestimmte Funktion ausgeführt werden. Laut GOOGLE soll ich setatrib nehmen. Dann lößt es die Funktion bereits beim laden aus, aber beim anklicken passiert nichts! Habt ihr vielleicht ne Idee, was ich machen kann?
    Geändert von kkapsner (26-05-2010 um 01:19 Uhr) Grund: CODE-TAGS!

  2. #2
    Avatar von kkapsner
    kkapsner ist offline Super Moderator
    registriert
    28-03-2008
    Beiträge
    17.695

    AW: dynamische Tabelle mit onclick(event)

    Was ist setatrib?
    Wenn du Text ändern willst - nimm' doch ein <input>...
    Dein Code ist nicht besondern schön... und auch nicht leicht zu warten...
    Wenn du auf einen Klick auf ein Element reagieren willst muss du hald den entsprechenden Event-Handler dort registrieren... wo liegt genau dein Problem?

  3. #3
    chappy_berlin ist offline Eroberer
    registriert
    09-04-2010
    Beiträge
    55

    AW: dynamische Tabelle mit onclick(event)

    Sorry, habe mich etwas verschrieben. Meinte "setAttributeNS(null, 'visibility', 'visible')" . Jetzt will ich zum Beispiel Zelle 10 anklicken und es soll was passieren. Mit onclick passiert es aber schon bei aufruf des Scriptes. Aber nicht beim anklicken der entsprechenden Zelle. Das Script für die Tabelle habe ich im Netz gefunden und es war das für mich am leichtesten nachvollziehbare Script zum Erzeugen einer dynamischen Tabelle mit JS.

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

    AW: dynamische Tabelle mit onclick(event)

    Zitat Zitat von chappy_berlin Beitrag anzeigen
    Sorry, habe mich etwas verschrieben. Meinte "setAttributeNS(null, 'visibility', 'visible')" .
    wenn du keinen namespace brauchst, warum nimmst du dann nicht setAttribute, sondern setAttributeNS?
    einfacher und manchmal auch notwendig ist
    element.visibility = "visible";

    Zitat Zitat von chappy_berlin Beitrag anzeigen
    Jetzt will ich zum Beispiel Zelle 10 anklicken und es soll was passieren. Mit onclick passiert es aber schon bei aufruf des Scriptes. Aber nicht beim anklicken der entsprechenden Zelle.
    dann setzt du den eventhandler vermutlich falsch. onclick erwartet eine funktionsreferenz. du führst die funktion sicher beim zuweisen fälschlicherweise aus.

  5. #5
    chappy_berlin ist offline Eroberer
    registriert
    09-04-2010
    Beiträge
    55

    AW: dynamische Tabelle mit onclick(event)

    Leider setze ich den eventhandler garantiert falsch! Habe schon an die beiden letzten zeilen "tr10" ".onclick=test()"" angehängt. Test bringt nur per alert eine meldung mit hallo im moment. Leider wird test schon beim tabellenaufbau pro zeile aufgeführt. In diesem fall also 200 mal. Aber bei einem klick auf die zelle passiert nichts. Auch mit setatribut passiert nichts anderes. Wo muß ich ansetzen, das problem zu lösen? Habt ihr ne idee?

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

    AW: dynamische Tabelle mit onclick(event)

    PHP-Code:
    TD10.onclick=test
    EDIT: Wobei du dir das sparen kannst. Ein Klickevent auf die Tabelle reicht aus.

  7. #7
    chappy_berlin ist offline Eroberer
    registriert
    09-04-2010
    Beiträge
    55

    AW: dynamische Tabelle mit onclick(event)

    Ein klickevent über die ganze tabelle geht leider nicht, da zelle 9 und 10 unterschiedliche events haben sollen und zelle 1 bis 8 keine events bekommen. Danke für den tip! Werde ihn heute nachmittag mal ausprobieren!

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

    AW: dynamische Tabelle mit onclick(event)

    Zitat Zitat von chappy_berlin Beitrag anzeigen
    Ein klickevent über die ganze tabelle geht leider nicht, da zelle 9 und 10 unterschiedliche events haben sollen und zelle 1 bis 8 keine events bekommen.
    Ja und? Das wäre kein Hindernis.

    Aber dein Code deuten schon daraufhin, dass du es lieber etwas umständlicher magst

  9. #9
    chappy_berlin ist offline Eroberer
    registriert
    09-04-2010
    Beiträge
    55

    AW: dynamische Tabelle mit onclick(event)

    Mit dem umständlich stimmt teilweise. Allerdings komme ich von der php strecke und da ist eine dynamische tabelle mit "null link" für meine begriffe einfacher zu gestallten. Vielleicht hast du einen tip, wie ich das ganze einfacher gestallten kann um auch eine bessere wartung hin zu bekommen.

    Danke schon mal im voraus!

  10. #10
    Avatar von kkapsner
    kkapsner ist offline Super Moderator
    registriert
    28-03-2008
    Beiträge
    17.695

    AW: dynamische Tabelle mit onclick(event)

    Aber in PHP gibt es doch auch for-Schleifen... und deine Variablenvergabe ist mehr als suboptimal.

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

    AW: dynamische Tabelle mit onclick(event)

    Zitat Zitat von chappy_berlin Beitrag anzeigen
    Mit dem umständlich stimmt teilweise. Allerdings komme ich von der php strecke und da ist eine dynamische tabelle mit "null link" für meine begriffe einfacher zu gestallten. Vielleicht hast du einen tip, wie ich das ganze einfacher gestallten kann um auch eine bessere wartung hin zu bekommen.
    Mit dem event? Schwieirg, weil ich nicht weiß was du machen willst.

    Aber der Weg führt über das Event Objekt. Damit kannst du leicht rausfinden von welchem Element der Event kommt und wenn du einen Aufruf nur in bestimmten Splaten zulassen willst, kannst du auf die Eigenschaft .cellIndex prüfen und dann entsprechend reagieren.

  12. #12
    chappy_berlin ist offline Eroberer
    registriert
    09-04-2010
    Beiträge
    55

    AW: dynamische Tabelle mit onclick(event)

    Zu kkapsner:

    Bei php kann man einfach um den dynamischen tabellenteil einfach eine do...while schleife legen. Die tabellenteile können einfach vom html code übernommen werden. Die while bedingung ist ein teil von der mysql anfrage in php. Geht die tabellenerstellung in js ähnlich?

    Zu ein_schlauer:

    Ich will die von php zurück gegebenen daten in eine tabelle packen und die neune und zehnte tabellenzelle zur bearbeitung freigeben. Sprich durch einen klick auf das neunte oder zehnte tabellenfeld soll per klick sich eine kleine eingabe bzw. änderungsmaske öffnen. Daher benötige ich das onclick event.

  13. #13
    chappy_berlin ist offline Eroberer
    registriert
    09-04-2010
    Beiträge
    55

    AW: dynamische Tabelle mit onclick(event)

    Zitat Zitat von ein schlauer Beitrag anzeigen
    PHP-Code:
    TD10.onclick=test
    EDIT: Wobei du dir das sparen kannst. Ein Klickevent auf die Tabelle reicht aus.
    Danke, genau das war es!

Ähnliche Themen

  1. Mainbody in Tabelle - dynamische Größenanpassung
    Von hinkel11 im Forum CSS und (X)HTML
    Antworten: 3
    Letzter Beitrag: 06-03-2009, 12:45
  2. Antworten: 0
    Letzter Beitrag: 15-09-2008, 10:39
  3. Anzahl Zeilen von Tabellen aus Tabelle
    Von Conny80 im Forum Serverseitige Programmierung
    Antworten: 31
    Letzter Beitrag: 04-03-2007, 06:24
  4. dynamische tabelle abfragen
    Von timste im Forum JavaScript
    Antworten: 6
    Letzter Beitrag: 07-03-2006, 10:36
  5. dynamische Tabelle <--> onClick
    Von jj_ im Forum JavaScript
    Antworten: 3
    Letzter Beitrag: 05-08-2005, 15:16

Stichworte

Lesezeichen

Berechtigungen

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