ChildNodes u. firstChild !? (HTML, CSS und Javascript)

[thread]2299[/thread]

ChildNodes u. firstChild !?

Leser: 1

Danwe

2006-06-20 17:15

User since
2006-06-09
76 Artikel
BenutzerIn
[default_avatar]

HI,

mein Problem ist, dass ich im DOM über firstChild oder sonst wie an untergeordnete Elemente kommen möchte, um um diese herum (bzw deren Text) Eingabefelder zu bauen. Nur leider funktioniert firstChild nicht. Liegt das an der Tabelle??

Hier ist der entscheidende Teil der HTML Datei:

Code: (dl )

<form name="Formular" action="gaestebuch.plx" method="post">

    <table class="guestTable" width = "400px" onmouseover="colorChangeColor(this)" onmouseout="colorChangeWhite(this)"
    onclick="textEditNow(this)">
        <tr>
            <td id="tests" class="Date" width=125px rowspan=2>
                <u><b>#101</b></u>
                <p>
                    19. Juni 2006,<br>um 14:53:37 Uhr<br>
                    <textarea cols='15' rows='1' name='nachricht'>www.muster.de/test/hallo</textarea>
                <p>
            </td>
            <td class="Name" align = "Right">   
                <b><input type="text" size="15" maxlength="35" name="titel" value="Mustermann"></b>
                aus
                <b><input type="text" size="15" maxlength="35" name="titel" value="Musterstadt"></b>
            </td>
        </tr>
        <tr>
            <td class='Text'>
                <h1><input type="text" size="50" maxlength="35" name="titel" value="Hallo Welt!"></h1>
                
                <textarea cols='90' rows='8' name='nachricht'>Text ... text.</textarea>
                
            </td>
        </tr>
    </table>

</form>

und hier der js Code, hier würde ich gerne mit childnodes arbeiten.
Also z.B. elem.childNode.childNode.style.backgroundColor = "#cc0000"
Da ich ja 2 Ebenen nach unten gehen muss, um eine der Tabellenspalten zu kriegen! Nur childNodes will nicht!

Achja, in dem Beispiel sind schon die Formularfelder eingebaut wo sie dann mal hin sollen. Ich habe das ganze natürlich auch ohne die Felder, nur mit dem Text, aber so soll es mal aussehen.

Code: (dl )

<script type="text/javascript">

function colorChangeColor(elem) {
  elem.style.backgroundColor = "#cc0000";   //Farbe Wechseln bei innaktivem Feld (eigentlich möcht ich per childNode die einzelnen Felder in der Farbe ändern, nicht die Tabelle!)
}

function colorChangeWhite(elem) {
  elem.style.backgroundColor = "#FFFFFF";   //Farbe Wechseln bei innaktivem Feld (eigentlich möcht ich per childNode die einzelnen Felder in der Farbe ändern, nicht die Tabelle!)
}

function textEditNow(elem) {
  // hier wird dann auch mit hilfe von childNodes um die jeweiligen Textteile ein Eingabefeld gebaut.
}

</script>

parentNode geht komischerweise, im gegensatz zu childNodes bzw firstChild.
Per id kann ich übrigens nichts ansprechen, diese eine Tabelle ist nur ein Beispiel, per Perl werden dann noch viel mehr generiert, die man natürlich alle bearbeiten können sollte.\n\n

renee

2006-06-20 20:43

User since
2003-08-04
14371 Artikel
ModeratorIn

Woher hast Du childNode? Ich habe jetzt nur childNodes gefunden und das ist ein Array mit alles childNodes...

http://de.selfhtml.org/javascript/objekte/node.htm#first_child

OTRS-Erweiterungen (http://feature-addons.de/)
Frankfurt Perlmongers (http://frankfurt.pm/)
--

Unterlagen OTRS-Workshop 2012: http://otrs.perl-services.de/workshop.html
Perl-Entwicklung: http://perl-services.de/

Danwe

2006-06-21 12:20

User since
2006-06-09
76 Artikel
BenutzerIn
[default_avatar]

ok, firstChild ist das richtige.
Allerdings war mein hauptfehler, dass ich nicht beachtet hatte, dass auch der Text der innerhalb eines Elementes eingeklammert ist, als unterelement zählt. Wenn ich also .firstChild.firstChild.firstChild mache geht das nicht, denn ich würde auf das #Text Element zugreifen u. das hat keine Childrens mehr.
ich muss also firstChild.nextSibling.firstChild.nextSiblin usw schreiben. Bei der Tabelle kann das schon recht lang werden, u. wenn ich nochmal was an meiner Tabellenstruktur ändere, wirds unübersichtlich, alles nochmal zu ändern.

Gibts denn keine Alternativen?
ich meine kann ich nicht einfach meine Tabelle ansprechen wie bisher über This, und dann irgendwie alle Zellen mit einer Klasse, bzw einem name="" ansprechen, um schneller u. übersichtlicher darauf zuzugreifen?

nepos

2006-06-21 12:42

User since
2005-08-17
1420 Artikel
BenutzerIn

Hm, warum gibst du deinen Eingabefeldern nicht einfach ne ID und greifst dann via

Code: (dl )

document.getElementById(...);

drauf zu?
Dann sparst du dir das Gehangel durch die Tabelle.

Danwe

2006-06-21 14:10

User since
2006-06-09
76 Artikel
BenutzerIn
[default_avatar]

ja aber das geht doch nicht!
Es wird doch ein Gästebuch, das heist ich hätte diese ID nachdem das in perl generiert wurde vielleicht 20 mal in der html datei stehen u. das geht doch nicht!

das Problem ist eben, dass ich diese Tabelle dann öfters habe u. individuell nur die auswählen darf, die der Admin gerade im Fokus (maus) hat. Verstanden?

renee

2006-06-21 14:31

User since
2003-08-04
14371 Artikel
ModeratorIn

Du kannst doch auch mit Perl unterschiedliche ID's generieren...

nepos

2006-06-21 15:03

User since
2005-08-17
1420 Artikel
BenutzerIn

Beschreib doch mal genau, was du da machen willst.

Danwe

2006-06-21 18:20

User since
2006-06-09
76 Artikel
BenutzerIn
[default_avatar]

Naja, das mit Perl generieren halte ich für überflüssig, aber daran habe ich auch schon gedacht.

ein Gästebuch möchte ich machen:
Das Gästebuch funzt schon, Leute können posten u. die Nachrichten lesen, gespeichert wird in einem mysql datenbank, es gibt eine ID Spalte die per autoincrement Zahlen gefüllt ist (die könnten für die ID dienen).

Nun möchte ich einen Admin bereich gestalten.
Der Admin kann dann einfach einen Beitrag anklicken, u. sofort verschwinden die texte wie username u. nachricht usw, dafür sieht man dann eingabeboxen mit dem Selben text darin. Dort kann der Admin seine Änderungen vornehmen u. dann wieder den Eintrag speichern. Die ID aus der Tabelle steht dann auch bei jedem Eintrag dabei, damit ich weis welcher Eintrag das ist.

Aber für die eingabefelder möchte ich nun eigentlich keine IDs mehr generieren müssen. Ich habs jetzt auch schon geschafft alle Texte zu löschen u. deren inhalte in neue Variablen zu speichern. Jetzt muss ich nurnoch die Eingabefelder generieren u. die texte der Variablen wieder hineinschreiben, ich denke das bekomme ich hin :D

ich habe nun einfach alle Tags um die texte mit name="editable" versehen, auf diese greife ich dann zu, u. operiere von dort aus.

EDIT:
ein was habe ich aber dabei übersehen:
Ich suche jetzt irgendwie ALLE namen ab u. neheme alls Felder die als name="editable" haben. und das werden ja dann alle meine entsprechenden Felder in allen Tabellen (also alle Gästebucheinträge) haben.
Ich werde so also immer nur den ersten eintrag veränder könne weil ich z.b. nach
var mailValue = document.getElementsByName("editable")[0].firstChild.nodeValue;
frage.
Welche möglichkeit gibt es, zwar nach getElmentsByName zu suchen, aber dies AB einem bestimmten knoten, den ich über This definiere?
Also so dass ich nach getElementsByName suche, allerdings werden nur die gefunden die UNTER meiner aktuellen Gästebuch(tabelle) hängen!\n\n

GwenDragon

2006-06-21 18:48

User since
2005-01-17
14548 Artikel
Admin1

Also nach HTML-Standard sollte jedes Element einen eindeutigen Namen haben, also nicht alle name=editable sondern name=editable1 ... name=editable2 etc.

die Drachin, Gwendolyn

Unterschiedliche Perl-Versionen auf Windows (fast wie perlbrew) • Meine Perl-Artikel

Strat

2006-06-21 20:52

User since
2003-08-04
5246 Artikel
ModeratorIn

sowas koennte man mit AJAX ganz gut machen.

Eine seite mit:
[html]
<div id="msg1">...</div>
bis
<div id="msg20">...</div>
[/html]
anlegen, dann kannst du auf einer seite 20 Nachrichten posten (musst halt vor- und zurueckblaettern implementieren, aber das ist nicht so schwierig.

wenn du z.B. prototype.js als Bibliothek dafuer verwendest, kannst du einfach mit

Code: (dl )

$('msg0').innerHTML = message1; # ist abkuerzung fuer getElementById

den nachrichtencontent reinschreiben.

perl -le "s::*erlco'unaty.'.dk':e,y;*kn:ai;penmic;;print"
http://www.fabiani.net/

View all threads created 2006-06-20 17:15.