Zeilen- Daten

[Marlene]

Hallo,

ich habe eine Tabelle mit mehreren Spalten und in der letzten Spalte befindet sich ein Button:

  
<table>  
   <tr>  
     <td>Hallo</td>  
     <td>weitere Spalte</td>  
     <td><input type="submit" onclick="jsMethode()" /></td>  
   </tr>  
   <tr>  
     <td>Hallo2</td>  
     <td>weitere Spalte2</td>  
     <td><input type="submit" onclick="jsMethode()" /></td>  
   </tr>  
</table>  

Wenn ich jetzt auf den Button klicke, möchte ich in der js- Methode "jsMethode" die Daten der Zeile, wo sich der Button befindet, auslesen,
Weiß jemand wie ich das machen kann?
Vielen Dank und lg

[gast42]

<table>
   <tr>
     <td>Hallo</td>
     <td>weitere Spalte</td>
     <td><input type="submit" onclick="jsMethode(this)" /></td>
   </tr>
   <tr>
     <td>Hallo2</td>
     <td>weitere Spalte2</td>
     <td><input type="submit" onclick="jsMethode(this)" /></td>
   </tr>
</table>

>   
> Wenn ich jetzt auf den Button klicke, möchte ich in der js- Methode "jsMethode" die Daten der Zeile, wo sich der Button befindet, auslesen,  
> Weiß jemand wie ich das machen kann?  
  
~~~javascript
  
function jsMethode(wo) {  
 var tr=wo.parentNode.parentNode;  
 var zellen=tr.cells;  
 for (var i=0;i<zellen.length;i++) {  
  alert(zellen[i].innerHTML);  
 }  
}  

achte auf das this

[Marlene]

Hallo Jungs,

das klappt ja wunderbar, ein kleines Problem hätte ich noch,
Ich bekomme mit:

zellen[1].innerHTML folgendes:

<input type="text" id="portInput" value=""/>

Jetzt weiß ich nicht genau, wie ich auf das von mir Eingegebene zugreifen kann. Ich habs jetzt schon versucht mit:

$(zellen[1].innerHTML).val() (da ich auch jQuery verwende) bzw. hab ichs auch mit text() versucht, hat aber leider nicht geklappt.

Weiß von euch jemand Rat für dieses Problem ?
Vielen Dank,

Marlene

[MudGuard]

Hi,

zellen[1].innerHTML folgendes:

<input type="text" id="portInput" value=""/>

Jetzt weiß ich nicht genau, wie ich auf das von mir Eingegebene zugreifen kann. Ich habs jetzt schon versucht mit:

nicht über innerHTML. Hol Dir das input-Element und nimm dann dessen value-Eigenschaft.

cu,
Andreas

[Marlene]

Hi,

zellen[1].innerHTML folgendes:

<input type="text" id="portInput" value=""/>

Jetzt weiß ich nicht genau, wie ich auf das von mir Eingegebene

zugreifen kann

Könnte mir da noch jemand helfen, ich probiers jetzt schon einige Zeit, mit jQuery drauf zuzugreifen, es funktioniert aber nicht.
Ich wäre sehr froh über hilfe.
Danke,
Marlene

[Felix Riesterer]

Liebe Marlene,

Könnte mir da noch jemand helfen, ich probiers jetzt schon einige Zeit, mit jQuery drauf zuzugreifen, es funktioniert aber nicht.

hast Du meine Antwort überhaupt gelesen?

Dass Du mit jQuery hantierst ist eine Sache, wie JavaScript und die in seinen Objekten abgebildeten HTML-Elemente erreichbar sind, ist eine andere. Mit jQuery kann man vieles vereinfacht notieren, man kommt aber um JavaScript als Sprache trotzdem nicht herum.

Liebe Grüße,

Felix Riesterer.

[gast42]

zellen[1].innerHTML folgendes:

<input type="text" id="portInput" value=""/>

zellen[i].firstChild.value wäre eine Möglichkeit

[molily]

zellen[1].innerHTML folgendes:

<input type="text" id="portInput" value=""/>

Jetzt weiß ich nicht genau, wie ich auf das von mir Eingegebene zugreifen kann. Ich habs jetzt schon versucht mit:

$(zellen[1].innerHTML).val() (da ich auch jQuery verwende) bzw. hab ichs auch mit text() versucht, hat aber leider nicht geklappt.

zellen[1] liefert dir ein Elementobjekt (DOM-Elementknoten).

Die $-Funktion von jQuery verpackt Elemente in ein jQuery-Objekt:

$(zellen[1])

Ein jQuery-Objekt ist eine Liste mit Elementobjekten. Darauf kannst du dann die bekannten jQuery-Methoden aufrufen. Zum Beispiel:

$(zellen[1]).find('input').val() liefert dir den Wert des ersten input-Elements in der Zelle.

(Das ganze Problem mit jQuery umgesetzt ginge natürlich etwas einfacher als dieses Gemisch.)

Mathias

[Gunnar Bittersmann]

@@Marlene:

nuqneH

Wenn ich jetzt auf den Button klicke, möchte ich in der js- Methode "jsMethode" die Daten der Zeile, wo sich der Button befindet, auslesen,

Dazu sollte die Funktion wissen, von welchem Button aus sie aufgerufen wurde. Dieser ist also als Parameter mit zu übergeben: jsMethode(this);

In der Funktion jsMethode(element) ist element dann die Referenz auf das jeweilige input-Element. Von diesem gehst du im DOM <http://de.selfhtml.org/javascript/objekte/node.htm#parent_node@title=ein Element hoch> zum td-Element, dann noch eins zum tr-Element. Darin hast du mit [ref:self812;javascript/objekte/htmlelemente.htm#tr@title=cells] Zugriff auf die anderen td-Elemente der betreffenden Tabellenzeile, Zählung bei 0 beginnend. Das jeweils <http://de.selfhtml.org/javascript/objekte/node.htm#first_child@title=erste Kindelement> von diesen ist ein Textknoten, dessen http://de.selfhtml.org/javascript/objekte/node.htm#data@title=Inhalt du auslesen willst.

element.parentNode.parentNode.cells[0].firstChild.data sagt "Hallo" bzw. "Hallo2".

Qapla'

[Felix Riesterer]

Liebe Marlene,

die bisherigen Antworten (siehe unten) haben Dir ja schon gezeigt, dass Du im Methodenaufruf mitgeben musst, wo genau der Benutzer geklickt hat. Ich möchte Dir anbieten, dass Du überhaupt kein onclick-Attribut im HTML-Dokument notierst, sondern den JavaScript-Code in einer <http://de.selfhtml.org/javascript/intro.htm#javascriptdateien@title=externen JS-Datei> vom HTML-Dokument getrennt hälst.

Die JavaScript-Datei solltest Du entweder am Ende des HTML-Dokuments als letztes Element im <body> einbinden, oder, wenn Du sie im <head> notieren willst, mit einem "Autostart" versehen.

Nachdem also Dein Code aktiv wird, muss er sich nur noch Deine Tabelle suchen und die Buttons mit der Funktionalität versehen. Dazu hast Du zwei Möglichkeiten. Entweder Du versiehst Deine Tabelle mit einer ID oder Klasse, oder Dein JavaScript weiß einfach, die wievielte Tabelle im Dokument diejenige welche ist.

function prepareSubmitButtons () {  
    var table, tables, inputs, i;  
  
    // Tabelle mit ID finden  
    table = document.getElementById("datentabelle");  
  
    // erste Tabelle im Dokument finden  
    table = document.getElementsByTagName("table")[0];  
  
    // erste Tabelle im Formular mit dem Namen "meinFormularName" finden  
    table = document.meinFormularName.getElementsByTagName("table")[0];  
  
    // Tabelle mit der Klasse "daten" finden  
    tables = document.getElementsByTagName("table");  
    for (i = 0; i < tables.length; i++) {  
        if (tables[i].className.match(/\bdaten\b/)) {  
            table = tables[i];  
        }  
    }  
  
    // submit-Buttons mit onclick-Event ausrüsten  
    if (table) {  
        inputs = table.getElementsByTagName("input");  
        for (i = 0; i < inputs.length; i++) {  
            if (inputs[i].type == "submit") {  
                inputs[i].onclick = function (e) {  
                    return jsMethode(this);  
                }  
            }  
        }  
    }  
}

Ich vermute stark, dass Du mit "jsMethode" eine Datenüberprüfung oder Ähnliches vornehmen willst. Wenn nun diese Überprüfung scheitern sollte,m dann willst Du sicher das Abschicken der Daten verhindern, oder nicht. Dazu müsste Deine jsMethode ein passendes true oder false zurückliefern, damit das "return jsMethode(this)" den Klick abfangen und das Absenden verhindern kann.

Liebe Grüße,

Felix Riesterer.

[Gunnar Bittersmann]

@@Felix Riesterer:

nuqneH

Die JavaScript-Datei solltest Du entweder am Ende des HTML-Dokuments als letztes Element im <body> einbinden

Ja. Ohne Wenn und Aber.

oder, wenn Du sie im <head> notieren willst

Das will man eigentlich nicht. [PERFORMANCE-BP2]

Qapla'

[molily]

Die JavaScript-Datei solltest Du entweder am Ende des HTML-Dokuments als letztes Element im <body> einbinden

Ja. Ohne Wenn und Aber.

Da gibt es ganz viele Wenns und Abers.

Manche Scripte müssen im head gestartet werden wie z.B. der HTML5-Shiv und Startup-Scripte für Statistiken oder JavaScript-Anwendungen.

Bei einer größeren Menge an Scripten und Modulen verwendet man JavaScript-Loader, die Scripte in der Reihenfolge der Abhängigkeiten asynchron laden und ausführen. Das wird gerne mit Polyfills kombiniert, welche nur geladen werden müssen, wenn entsprechende Browserunterstützung nicht vorhanden ist (z.B. JSON, Canvas oder HTML5-Features wie placeholder).

Zudem gibt es die async- und defer-Attribute. Es spricht nichts dagegen, Scripte im head asynchron zu laden.

oder, wenn Du sie im <head> notieren willst

Das will man eigentlich nicht. [PERFORMANCE-BP2]

Diese Erkenntnis ist nicht falsch, aber seitdem diese Regeln vor vier Jahren (oder war es länger her?) publiziert wurden, hat sich einiges getan, sodass diese Regel nicht mehr so pauschal gilt. Wo und wie man Scripte einbindet und was die performanteste Lösung ist, hängt von verschiedenen Faktoren ab.

Mathias

[molily]

// submit-Buttons mit onclick-Event ausrüsten
    if (table) {
        inputs = table.getElementsByTagName("input");
        for (i = 0; i < inputs.length; i++) {
            if (inputs[i].type == "submit") {
                inputs[i].onclick = function (e) {
                    return jsMethode(this);
                }
            }
        }
    }

Das ist ein wunderbarer Anwendungsfall von Event Delegation.

table.onclick = function (e) {  
  var e = e || window.event;  
  var target = e.target || e.srcElement;  
  if (target.type == 'submit') {  
    // Mach was mit target  
  }  
};

Mathias

[molily]

Hallo,

so könnte es in jQuery aussehen:
http://jsfiddle.net/V5qPq/

Mathias