✔ Nach cloneNode Position ermitteln und übergeben

S

shinbo

Mitglied
Hallo zusammen,
Da ich mich nur so la la auskenne mit JS komme ich leider nicht weiter. ich klone einen komplettes Div-Tag per JS wo jeweils 2 input, ein select Formular und ein a-tag endhalten sind. Auf jeder geklonten Zeile gibt es auch ein Löschen Button das ich per div-tag der ein JS Funktion ausführt realisiert habe und per onClick angesprochen wird. Wenn ich drauf drücke löscht er wie gewünscht die jeweilige Zeile.
Das Klappt alles wunderbar. Für die Weiterverarbeitung beim a-tag brächte ich aber die Position. Wie bekomme ich das heraus?
Mein Ansatz ist das ich beim Generieren einer neuen Zeile einfach hochzähle und es in einem Array abspeichere und gleichzeitig per „lastChild.nodeValue“ den „href“ des geklonten Blocks damit bestücke. Dabei habe ich aber das Problem dass wenn eine Zeile gelöscht wird natürlich die Anzahl nicht mehr stimmt.
Z.B.

Zeile 1: < Input > < input > < Select > < link > < delete >
Zeile 2: < Input > < input > < Select > < link > < delete >
Zeile 3: < Input > < input > < Select > < link > < delete >
Zeile 4: < Input > < input > < Select > < link > < delete >

Also wenn ich in der 3 Zeile auf den Link drücke das ein JS Funktion ausführt soll er JS sagen das gerade in Zeile 3 auf dem Link gedrückt wurde. Geht das?
 
Hi,

falls es ausreicht, das "Zeilenelement" zu ermitteln, könntest du dich am DOM entlanghangeln.

Im nachstehenden Beispiel wird beim Klick auf den Link die CSS-Klasse des "Zeilenelements" ausgegeben.
Code: 
<div class="clDiv">
  <input type="text">
  <select><option>wählen</option></select>
  <a onclick="alert(this.parentNode.className); return false;" href="#">link</a>
</div>

Sollte das nicht ausreichen, so müssen die Zeilenelemente in ein übergeordnetes Element eingebettet werden. Dieses übergeordnete Element wird ähnlich dem obigen Beispiel ermittelt. Dann werden die darin enthaltenen Zeilenelemente in einer Schleife durchlaufen und mit dem Elternelement des auslösenden Links verglichen.

Ciao
Quaese
 
Das ganze muss in div eingepackt werden und dann nochmal einzeln in divs
<div>
<div>< Input > < input > < Select > < link > < delete ></div>
<div>< Input > < input > < Select > < link > < delete ></div>
<div>< Input > < input > < Select > < link > < delete ></div>
<div>< Input > < input > < Select > < link > < delete ></div>
</div>

In JS wuerde ich dann ueber parentNode und previousSibling gehen:
Code: 
var row = 0;
node = this.parentNode;
while (node.previousSibling != null){
  row++;
  node = node.previousSibling;
}
alert("Es wurde der Link in Zeile "+row+" verwendet");

Gibt eventuell noch andere Loesungsmoeglichkeiten.
 
Bei dem code von Quaese bekomme ja nur den Namen der jeweiligen klasse aus aber die gibt es 3x.
Meine Struktur sieht so aus:
<div>
<div>
<div>< Input > < input > < Select > < link ></div> <div> < delete ></div>
</div>
<div>
<div>< Input > < input > < Select > < link ></div> <div> < delete ></div>
</div>
<div>
<div>< Input > < input > < Select > < link ></div> <div> < delete ></div>
</div>
</div>

Der code von Chef_De_Loup müsste ja das machen was ich brauche weis aber nicht genau wie es eingebunden wird.
Mein Versuch:

HTML: 
<script language=JavaScript type=text/javascript>
function test(node){
var row = 0;
//node = this.parentNode;
while (node.previousSibling != null){
  row++;
  node = node.previousSibling;
}
alert("Es wurde der Link in Zeile "+row+" verwendet");
}
 
</script>
<div style="width:330px; float:left">
<div style="float:left;">
  <div id="test" style="width:250px; height:30px; float:left;">
    <input type="text">
    <select>
      <option>wählen</option>
    </select>
    <a onclick="test(this.parentNode);" href="#">link</a> </div>
  <div style="width:80px; height:30px; float:left;">Delete</div>
</div>
 
<div style="float:left;">
  <div id="test" style="width:250px; height:30px; float:left;">
    <input type="text">
    <select>
      <option>wählen</option>
    </select>
    <a onclick="test(this.parentNode);" href="#">link</a> </div>
  <div style="width:80px; height:30px; float:left;">Delete</div>
</div>
 
<div style="float:left;">
  <div id="test" style="width:250px; height:30px; float:left;">
    <input type="text">
    <select>
      <option>wählen</option>
    </select>
    <a onclick="test(this.parentNode);" href="#">link</a> </div>
  <div style="width:80px; height:30px; float:left;">Delete</div>
</div>
 
</div>
 
ich glaub ich habe es hinbekommen. Hier der Code:

HTML: 
<script language=JavaScript type=text/javascript>
function test(a){
var row = 0;
node = a.parentNode;
while (node.previousSibling != null){
  row++;
  node = node.previousSibling;
}
alert("Es wurde der Link in Zeile "+row+" verwendet");
}
</script>
<div style="width:330px; float:left">
<div style="float:left;">
  <div id="test" style="width:250px; height:30px; float:left;">
    <input type="text">
    <select>
      <option>wählen</option>
    </select>
    <a onclick="test(this.parentNode);" href="#">link</a> </div>
  <div style="width:80px; height:30px; float:left;">Delete</div>
</div>
<div style="float:left;">
  <div id="test" style="width:250px; height:30px; float:left;">
    <input type="text">
    <select>
      <option>wählen</option>
    </select>
    <a onclick="test(this.parentNode);" href="#">link</a> </div>
  <div style="width:80px; height:30px; float:left;">Delete</div>
</div>
<div style="float:left;">
  <div id="test" style="width:250px; height:30px; float:left;">
    <input type="text">
    <select>
      <option>wählen</option>
    </select>
    <a onclick="test(this.parentNode);" href="#">link</a> </div>
  <div style="width:80px; height:30px; float:left;">Delete</div>
</div>
</div>

Danke
 
Zuletzt bearbeitet:
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück