michael schmidtmeier: createAttribute(JavaScript)

hallo,

ich habe ein problem mit dem dynamischen erzeugen von tabllen. wie schaffe ich es das onBlur="funktion" dynamisch erzeugt wird. ich habe leider im archiv nix gefunden. vielleicht auch die falschen stichwörter gehabt...

mein versuch:

TD2 = document.createElement("td");
  TD2Field = document.createElement("INPUT");
  TD2.appendChild(TD2Field)
  TD2A = document.createAttribute("name")
  TD2A.nodeValue = "datum";
  TD2Field.setAttributeNode(TD2A);
  TD2A = document.createAttribute("type")
  TD2A.nodeValue = "text";
  TD2Field.setAttributeNode(TD2A);
  TD2A = document.createAttribute("id")
  TD2A.nodeValue = "datum2";
  TD2Field.setAttributeNode(TD2A);
  TD2A = document.createAttribute("size")
  TD2A.nodeValue = "7";
  TD2Field.setAttributeNode(TD2A);
  TD2A = document.createAttribute("onBlur")
  TD2A.nodeValue = "checkyear()";
  TD2Field.setAttributeNode(TD2A);
  TD2text = document.createTextNode(" (Format: MM/JJJJ)");
  TD2.appendChild(TD2text);
  TR.appendChild(TD2);

bringt keinen fehler aber auch keinen sinn! daneben habe ich

TD2StrongFont = document.createElement("Strong");
  TD2.appendChild(StongFont)

probiert. scheinbar geht das auch nicht.

browser: ie6

danke,

michael

  1. Sup!

    daneben habe ich

    TD2StrongFont = document.createElement("Strong");
      TD2.appendChild(StongFont)

    probiert. scheinbar geht das auch nicht.

    Wenn es "scheinbar" nicht geht, dann geht's ja ;-)

    http://forum.de.selfhtml.org/archiv/2003/1/36105/#m197444

    Gruesse,

    Bio

    --
    SSDSGPS!
    1. okay, bio,

      es funktioniert nicht. nun hast du recht und mir nützt das trotzdem nicht, weil es mein problem nicht einmal ansatzweise berührt.

      michael

  2. Hallo Michael,

    so schnell finde ich hier auch keinen Fehler. Allerdings weiß ich auch nicht, was da nicht funktioniert. Ich erstelle dynamische Tabellen mit folgendem Script:

    t = document.getElementById(Id) ; // DIV mit ID, wo die Tabelle rein soll.
        tbl = document.createElement("table");
        tbl.id = "t_"+Id;
        tbl.border=2;
        tbdy = document.createElement("tbody");
        t.appendChild(tbl) ;
        t.firstChild.appendChild(tbdy) ;
        for (var z=0;z<nzeilen;z++) {
          t.getElementsByTagName("tbody")[0].appendChild(document.createElement("tr"));
          var trz=t.getElementsByTagName("tr")[z];
          for (var s=0;s<nspalten;s++) {
            trz.appendChild(document.createElement("td"));
            trz.getElementsByTagName("td")[s].appendChild(document.createTextNode(" ")) ;
          }
        }
    auf createAttribute verzichte ich normalerweise, da es mit z.B. "tbl.border" genauso gut geht.
    Zu sehen ist das Script unter http://home.vr-web.de/~j.berkemeier/uebersetzungsrechner.html.

    Gruß, Jürgen

    1. hallo jürgen,

      danke für das sichten meines problemes. ziel des scriptes soll es sein, die zeile:

      <tr>
       <td>
         <input type="text" size="7" onBlur="checkyear()">
         <strong>(Format: MM/JJJJ)</strong>
       </td>
      <tr>

      zu erzeugen. leider schaffe ich es nicht das attribut onBlur anzuhaengen. das script ist zwar nicht fehlerhaft (denn der knoten wird tadellos erzeugt) aber die function checkyear() wird trotzdem nicht ausgeführt. leiches gilt für mein attribut strong, denn ich wollte den text "(Format: MM/JJJJ)" gern GROSS schreiben (ohne einsatz von CSS).

      ich mutmaße jetzt mal das man vielleicht ein element <strong> nicht erstellen kann?

      vielleicht kann ich ja auch mit createAttribute kein attribut das eine javascript-funktion aufruft erstellten.

      vielleicht stell ich mich auch nur zu dämlich an. :-)

      micha

  3. Hallo,

    mein versuch:

    TD2 = document.createElement("td");
      TD2Field = document.createElement("INPUT");
      TD2.appendChild(TD2Field)
      TD2A = document.createAttribute("name")
      TD2A.nodeValue = "datum";
      TD2Field.setAttributeNode(TD2A);
      TD2A = document.createAttribute("type")
      TD2A.nodeValue = "text";
      TD2Field.setAttributeNode(TD2A);
      TD2A = document.createAttribute("id")
      TD2A.nodeValue = "datum2";
      TD2Field.setAttributeNode(TD2A);
      TD2A = document.createAttribute("size")
      TD2A.nodeValue = "7";
      TD2Field.setAttributeNode(TD2A);

    //Das funktioniert in Geckos.
    TD2A = document.createAttribute("onblur")
    TD2A.nodeValue = "checkyear();";
    TD2Field.setAttributeNode(TD2A);

    //Das funktioniert auch im IE.
    TD2Field.onblur = function() {checkyear();}

    TD2text = document.createTextNode(" (Format: MM/JJJJ)");
      TD2.appendChild(TD2text);
      TR.appendChild(TD2);

    bringt keinen fehler aber auch keinen sinn! daneben habe ich

    TD2StrongFont = document.createElement("Strong");
      TD2.appendChild(StongFont)

    Und was steht drin im STRONG-Element?

    TD2Strong = document.createElement("STRONG");
    TD2text = document.createTextNode("Inhalt des Strong-Elements");
    TD2Strong.appendChild(TD2text);
    TD2.appendChild(TD2Strong);

    viele Grüße

    Axel

    1. danke für deinen vorschlag, axel,

      das STRONG-Element kann ich jetzt erstellen, allerdings habe ich immernoch probleme mit ONBLUR im IE6:

      TD2 = document.createElement("td");
        TD2A = document.createAttribute("bgcolor");
        TD2A.nodeValue = "#f07832";
        TD2.setAttributeNode(TD2A);
        TD2Field = document.createElement("INPUT");
        TD2.appendChild(TD2Field)
        TD2A = document.createAttribute("name")
        TD2A.nodeValue = "datum";
        TD2Field.setAttributeNode(TD2A);
        TD2A = document.createAttribute("type")
        TD2A.nodeValue = "text";
        TD2Field.setAttributeNode(TD2A);
        TD2A = document.createAttribute("id")
        TD2A.nodeValue = "datum2";
        TD2Field.setAttributeNode(TD2A);
        TD2A = document.createAttribute("size")
        TD2A.nodeValue = "7";
        TD2Field.setAttributeNode(TD2A);
        //TD2A = document.createAttribute("onBlur")
        //TD2A.nodeValue = "checkyear()";
        //TD2Field.setAttributeNode(TD2A);
        TD2Field.onBlur = function() {alert('dfggh!');}
        TD2text = document.createTextNode(" (Format: MM/JJJJ)");
        TD2.appendChild(TD2text);

      TR.appendChild(TD2);

      bei mir geschieht gar nix... auch keine fehlermeldung...

      danke für deine hilfe

      micha

      1. Hallo,

        TD2Field.onBlur = function() {alert('dfggh!');}

        JavaScript ist case sensitive. Der Eventhandler heißt onblur, nicht onBlur.

        TD2Field.onblur = function() {alert('dfggh!');}

        viele Grüße

        Axel

        1. danke axel,

          jetzt funktioniert es.

          micha

  4. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>

    <head>
        <title>eventListenerDemo.html</title>
        <meta http-equiv="content-style-type" content="text/css" />
        <meta http-equiv="content-script-type" content="text/javascript" />
        <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
        <style type="text/css">
          /*
          */
        </style>
        <script type="text/javascript">
          /*

    gruss michael,

    statt:

    TD2Field = document.createElement("INPUT");
      ...
      ...
      TD2A = document.createAttribute("onBlur")
      TD2A.nodeValue = "checkyear()";
      TD2Field.setAttributeNode(TD2A);

    var TD2Field = document.createElement("INPUT");
         if (window.event) {
           TD2Field.attachEvent("onblur",checkyear);
         } else {
           TD2Field.addEventListener("blur",checkyear,true); // probieren, ob "onblur" oder "blur"
         }

    generell wuerde ich attribut-knoten nicht mit "document.createAttribute"
    erzeugen, da im msie diese methode nicht implementiert ist;

    benutze statt dessen die "node"-methode "setAttribute('name','value')
    oder setze die attribut-eigenschaften eines knotens direkt - z.b.:

    */
          function initDemo() {
            var htmlBodyElement = ((document.all && !window.opera) ? (document.all.tags("body")[0]) : ((document.getElementsByTagName) ? (document.getElementsByTagName("body")[0]) : (null)));
            if (htmlBodyElement) {
              var divNode = document.createElement("div");
              divNode.setAttribute("id","blubb");
              divNode.setAttribute("style","position:absolute;left:50px;top:50px;width:150px;height:80px;z-index:auto;background-color:#000000");

    htmlBodyElement.appendChild(divNode);

    if (document.all && !window.opera) {
                divNode = document.all.tags("div")["blubb"];
                divNode.style.cssText = "position:absolute;left:50px;top:50px;width:150px;height:80px;z-index:auto;background-color:#000000";
              } else {
                divNode = document.getElementsByTagName("div")["blubb"];
              }
              if (window.event) {
                divNode.attachEvent("onmousedown",showEventData);
              } else {
                divNode.addEventListener("mousedown",showEventData,true);
              }
            }
          }
          function showEventData(evt) {
            evt = ((window.event) ? (window.event) : (evt));
            var mouseX = ((evt.clientX) ? (evt.clientX) : (evt.pageX));
            var mouseY = ((evt.clientY) ? (evt.clientY) : (evt.pageY));
            elementNode = ((evt.target) ? (evt.target) : (evt.srcElement));
            alert("mousedown -> " + elementNode.id + "\nmouseX[" + mouseX + "]\nmouseY[" + mouseY + "]");
          }
          /*

    ich moechte mich soweit aus dem fenster lehnen und Dir fast raten:

    "[node].innerHTML" ist nicht so "boese", als das es nicht eine
    ueberlegung wert waere, diese abkuerzung beim dynamischen erzeugen
    von umfangreichen und komplexen _html_js_event_konstrukten_ zu nehmen;

    immerhin unterstuetzen mozilla und opera dieses nicht w3c-dom-konforme msie-feature;

    */
        </script>
      </head>

    <body onload="initDemo()">
        <p>
           
        </p>
      </body>

    </html>

    viel erfolg und by(t)e by(t)e - peterS. - pseliger@gmx.net

    --
    sh:| fo:) ch:? rl:| br:& n3:} n4:# ie:| mo:{ va:| de:[ zu:] fl:) ss:) ls:& js:)
    1. hallo peter,

      danke für die erklärungen.- jetzt funktioniert es!

      micha