• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

getElementsByClassName() o.ä.

A

Atlantis

Neues Mitglied
Hallo,

ich bin noch ziemlich neu in Javascript und schreibe gerade ein einfaches Userscript für ein Browsergame (zur Benutzung mit Greasemonkey). Dabei tritt das Problem auf, dass folgender Code nicht immer funktioniert:

Code: 
var Ausgabebereich = document.getElementsByTagName("table")[15];
Ausgabebereich.appendChild(TR);

Die gewünschte Tabelle hat nämlich nicht immer den Index 15 (wie bei mir), sondern ist je nach Einstellungen mal die 13. und mal die 17. Tabelle (oder so ähnlich) im Dokument. Allerdings besitzt sie die Klasse class="var" (und ist das erste und einzige Element dieser Klasse).

Dieser Code:
Code: 
var Ausgabebereich = document.getElementsByClassName("var")[0];
Ausgabebereich.appendChild(TR);

funktioniert natürlich nicht...:sad:

Danke für die Hilfe!
MfG Atlantis
 
Danke schonmal, aber wie füge ich jetzt genau diese Funktion:

Code: 
function getElementsByClassName(tagname, findClass, dothis) {
if(tagname)
{
 var aElm=document.body.getElementsByTagName(tagname);
 for(var i=0; i<aElm.length; i++) {
  if(aElm[i].className==findClass) {
   if(dothis == "machwas")
    {
     // Code zum Ausführen
    }
   }
  }
 }
}
(aus dem Thread http://www.html.de/javascript-ajax-...yclassname-funktioniert-nicht.html#post192418)

mit meiner gewünschten Anweisung zusammen? Ich krieg' das irgendwie nicht auf die Reihe...

MfG Atlantis
 
Du fügst diese Funktion irgendwo vor deine anderen Anweisungen ein und kannst dann ganz normal weiter dein getElementsByClassName benutzen. Aber die Funktion scheint mir nicht optimal zu sein. Hätte da eher an sowas gedacht als getElementsByClass Funktion
Code: 
function getElementsByClassName(cssClass, tagname) {

var searchTag = (tagname) ? tagname :  "*";
var allElements = document.getElementsByTagName(searchTag);
var resultElements = [];
// Über alle Elemente iterieren
for( var i=0; i < allElements.length; i++) {
  if(allElements[i].className == cssClass) resultElements.push(allElements[i]);
}

return resultElements;

}

gibt bestimmt noch eine effektivere. Aber die sollte es tun
 
Hatte diesen Beitrag eigentlich schon entfernt, weil nicht ganz zufrieden und keine Zeit mehr.
Da es dir aber wahrscheinlich immer noch um das Anhängen der tr an die richtige table geht, hilft es evtl trotzdem.


HTML: 
function getElementsByClassNameAndAppend(tagname, findClass, toAppend) {
if(tagname)
{
 var aElm=document.body.getElementsByTagName(tagname); 
 var newElmnt    = document.createElement(toAppend);

 for(var i=0; i<aElm.length; i++) {
  if(aElm[i].className==findClass) {
    this.appendChild(newElmnt);   
 }
 }
 }
}

Aufruf dann wie

getElementsByClassNameAndAppend('table','myclass','tr');

...würde wohl die Tabelle mit Klasse "myclass" finden und eine <tr> anhängen.

ungetestet.
 
Zuletzt bearbeitet:
Gilles schrieb:
Du fügst diese Funktion irgendwo vor deine anderen Anweisungen ein und kannst dann ganz normal weiter dein getElementsByClassName benutzen. Aber die Funktion scheint mir nicht optimal zu sein. Hätte da eher an sowas gedacht als getElementsByClass Funktion
Code: 
function getElementsByClassName(cssClass, tagname) {

var searchTag = (tagname) ? tagname :  "*";
var allElements = document.getElementsByTagName(searchTag);
var resultElements = [];
// Über alle Elemente iterieren
for( var i=0; i < allElements.length; i++) {
  if(allElements[i].className == cssClass) resultElements.push(allElements[i]);
}

return resultElements;

}
gibt bestimmt noch eine effektivere. Aber die sollte es tun
Zum Vergrößern anklicken....

Danke, sieht auf jeden Fall schon super aus!

Dass es leider immer noch nicht funktioniert, muss jetzt wirklich an mir liegen. Sehe ich das richtig, dass in meinem Beispiel (s.o.) getElementsByClassName("var", "table")[0] jetzt das Element liefert, auf das ich zugreifen will?

Warum funktioniert dann das immer noch nicht:
Code: 
var Ausgabebereich = document.getElementsByClassName("var", "table")[0];
Ausgabebereich.appendChild(TR);
MfG Atlantis
 
probier doch mal:

HTML: 
var TR    = document.createElement('tr');
var Ausgabebereich = document.getElementsByClassName("var", "table");
Ausgabebereich.appendChild(TR);
 
vast schrieb:
probier doch mal:

HTML: 
var TR    = document.createElement('tr');
var Ausgabebereich = document.getElementsByClassName("var", "table");
Ausgabebereich.appendChild(TR);
Zum Vergrößern anklicken....

Dass ich die Variable TR vorher schon definiert habe, ist natürlich klar. Und ohne "[0]" funktioniert es auch nicht... Bin jetzt schon etwas ratlos... :?
 
ok, ich vermute, das appendChild evtl nur f. IDs funktioniert.

Mal in Erwägung gezogen, jQuery zu verwenden?
...damit sind solche Sachen viel einfacher zu machen.

zB:
HTML: 
$('table.myclass').append('<tr><td>hallo</td></tr>');
und fertig wärs.
 
Danke für den Tipp, vast, aber ich habe den Fehler schon gefunden: Die Tabelle hatte nicht class="var" sonder class="vis"...

oO

Ich melde mich nochmal, wenn es noch weitere Probleme geben sollte :mrgreen:

MfG Atlantis
 
Also, eine Frage hätte ich noch. Und zwar hängt ja appendChild das gewünschte Element immer als letztes Kindelement an. Im oben genannten Fall soll die neue Tabellenzeile aber nicht ganz unten an die Tabelle angehängt werden, sondern an sechster Stelle (von sieben). Ist das auch möglich?

MfG Atlantis
 
per jQuery ginge das zB so:

$('table.myclass tr').eq('5').after('<tr><td>hallo</td></tr>');

eq() fängt übrigens bei 0 an zu zählen, daher .eq('5') für die sechste <tr>.
 
Ganz trivial gibt es in JavaScript auch insertBefore.

Dabei könntest du dann einfach die Kinder-Elemente deiner Tabelle in einer for-Schleife durchlaufen:
Code: 
for( var i = 0; i < document.getElementsByClassName( "myclass" )[ 0 ].children.length; i++ ) {
    if( i == 5 ) {
        var child = document.getElementsByClassName( "myclass" )[ 0 ].children[ i ];
        // Falls du etwas Hilfe dabei brauchst. ;o
    }
 }
 
Zuletzt bearbeitet:
DarkDragon193 schrieb:
Ganz trivial gibt es in JavaScript auch insertBefore.

Dabei könntest du dann einfach die Kinder-Elemente deiner Tabelle in einer for-Schleife durchlaufen:
Code: 
for( var i = 0; i < document.getElementsByClassName( "myclass" )[ 0 ].children.length; i++ ) {
    if( i == 5 ) {
        var child = document.getElementsByClassName( "myclass" )[ 0 ].children[ i ];
        // Falls du etwas Hilfe dabei brauchst. ;o
    }
 }
Zum Vergrößern anklicken....

Danke für den Tipp mit insertBefore. Das scheint aber bei mir nicht recht zu funktionieren (testhalber will ich einfach mal die neue Zeile vor die sechste Zeile hängen):

Code: 
var Ausgabebereich = document.getElementsByClassName("vis", "table")[0];
Ausgabebereich.insertBefore(TR, Ausgabebereich.getElementsByTagName("tr")[5]);

Funktioniert aber nicht...

MfG Atlantis

P.S.: Mein Code davor (der funktioniert hat) war:
Code: 
var Ausgabebereich = document.getElementsByClassName("vis", "table")[0];
Ausgabebereich.appendChild(TR);
 
Ausgabebereich ist nicht das unmittelbare Elternelement von Ausgabebereich.getElementsByTagName("tr")[5]. Das ist wohl ein <tbody> dazwischen.

Ungefähr so müsste es gehen:

Code: 
var Ausgabebereich = document.getElementsByClassName("vis", "table")[0];
var elem = Ausgabebereich.getElementsByTagName("tr")[5];
elem.parentNode.insertBefore(TR, elem);
 
Ich hab das ganze nicht getestet und garantiere auch für nichts... ;)

Wie auch immer, bei mir funktioniert dein Code auch nicht. Das liegt aber daran, dass zwischen tr und table noch tbody steht, wenn nicht anders angegeben.

Das hab ich jetzt da stehen..:
Code: 
// Eine Referenz zum tbody der Tabelle speichern, da dieser ohnehin erzeugt wird.
var table = document.getElementsByClassName( "vis" )[ 0 ].children[ 0 ];
// Der Platzhalter für die jeweilige Zeile.
var row = document.createElement( "tr" );
row.appendChild( document.createTextNode( "Neuer Datensatz " + counter++ ) );
table.insertBefore( row, table.getElementsByTagName( "tr" )[ 5 ] );

€dith: Während ich wohl etwas gefaulenzt hab ist mir mermshaus zuvor gekommen. x)
 
Danke euch beiden erstmal, aber leider geht's immer noch nicht :sad:

Hier ist nochmal der HTML-Quellcode (mit fiktiven Texten und Zahlen, aber die sind hier egal):
HTML: 
<table class="vis" width="100%" style="margin-bottom:15px">
 <tr><td><span class="eine_klasse"> </span> ...</td><td align="right"><b>1111</b></td></tr>
 <tr><td><span class="eine_zweite_klasse"> </span> ....</td><td align="right"><strong>2222</strong></td></tr>

 <tr><td colspan="2" class="header"><h4>Irgendeine Überschrift</h4></td></tr>

 <tr><td>...</td><td align="right" width="60">111</td></tr>
 <tr><td>....</td><td align="right">112</td></tr>
 <tr><td>...</td><td align="right">0</td></tr>
 <tr><td>.......</td><td align="right"><b>2222</b></td></tr>
 <!-- Hier soll die Zeile eingefügt werden -->
 <tr><td>Text</td><td align="right"><b>Text</b></td></tr> <!--Diese tr existiert nicht immer -->

</table>
Da, wo der Kommentar steht soll die bereits erzeugte neue Zeile (als Variable TR abrufbar) reinkommen.

Was habe ich jetzt oben falsch gemacht?

MfG Atlantis
 
HTML: 
<!DOCTYPE html>

<html lang="en">

    <head>
        <meta charset="utf-8" />
        <title>New</title>
        <script type="text/javascript">

window.onload = function ()
{
    var Ausgabebereich = document.getElementsByClassName("vis", "table")[0],
        elem = Ausgabebereich.getElementsByTagName("tr")[7]
        TR = document.createElement('tr'),
        TD = document.createElement('td'),
        TD2 = document.createElement('td');

    TD.appendChild(document.createTextNode('Hello'));
    TD2.appendChild(document.createTextNode('World'));
    
    TR.appendChild(TD);
    TR.appendChild(TD2);

    elem.parentNode.insertBefore(TR, elem);
};


    </script>
    </head>

    <body>
<table class="vis" width="100%" style="margin-bottom:15px">
 <tr><td><span class="eine_klasse"> </span> ...</td><td align="right"><b>1111</b></td></tr>
 <tr><td><span class="eine_zweite_klasse"> </span> ....</td><td align="right"><strong>2222</strong></td></tr>

 <tr><td colspan="2" class="header"><h4>Irgendeine Überschrift</h4></td></tr>

 <tr><td>...</td><td align="right" width="60">111</td></tr>
 <tr><td>....</td><td align="right">112</td></tr>
 <tr><td>...</td><td align="right">0</td></tr>
 <tr><td>.......</td><td align="right"><b>2222</b></td></tr>
 <!-- Hier soll die Zeile eingefügt werden -->
 <tr><td>Text</td><td align="right"><b>Text</b></td></tr> <!--Diese tr existiert nicht immer -->

</table>
    </body>

</html>

Wirf sonst einen Blick in die Fehlerkonsole.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben