✔ Problem mit Div Elementen

[cow]

Hi @ all

ich hätte da ein Problem. und zwar baue ich gerade ein zusammen klick bares Formular.
Was man sich auch dementsprechend Clonen kann usw.

Hierbei habe ich ein Problem / Frage

und zwar, ich Clone mir mein Tabellen Element (<tr>), das funktioniert soweit auch. Nun ist in diesem <tr> verschiedene Divs.

hier der Html Code:

<form method="" action="" id="test">

<table>
<tr id = "tablereihe">
<th>

	
 	   <input type="checkbox" name="checkboxname[]" onclick= "toggleMe('netz');return toggleMe('check')" value="Netz"> Netz<br>
    	   <input type="checkbox" name="checkboxname[]" onclick= "toggleMe('host');return toggleMe('check')" value="Host"> Host<br>
	   <input type="checkbox" name="checkboxname[]" onclick= "toggleMe('sol');return toggleMe('check')" value="Solsoft-Gruppe"> Solsoft-Gruppe
		
	   

</th>
<th>
	<div id="netz" style="display:none" >
		<textarea name="netzadd" cols="30" rows="3" ></textarea>
		<textarea name="bsch" cols="30" rows="3" ></textarea>
	</div>
</th>
<th>
	   <div id="host" style="display:none" >
		<textarea name="FQDN " cols="30" rows="3" ></textarea>
		<textarea name="ipa " cols="30" rows="3" ></textarea>
	   </div>
</th>
<th>
	   <div id="sol" style="display:none" >
		<textarea name="name" cols="30" rows="3"></textarea>
	   </div>
</th>
<th>
   	   <div id="check" style="display:none" >	
		
		   <input type="checkbox" name="dev"> DEV<br>
    	   	   <input type="checkbox" name="test"> TEST<br>
	   	   <input type="checkbox" name="pre"> PRELIVE<br>
		   <input type="checkbox" name="live"> LIVE		
	   </div>
</th>

</tr>
</table>

so das <tr> kopiert sich ohne Probleme nur leider öffnet sich dann immer nur die ersten divs. Ich bin schon aufdie idee gekommen die Divs Hinzuzählen also durchnummerieren .
Hier mal mein Js

function tr_klonen(obj,newID) {
  var kopie;
  if(obj.cloneNode) {
   // TR mit Kindern kopieren
   kopie=obj.cloneNode(true);
   // Der Kopie ggf. eine neue ID geben
   //div name + 1 setzten
   for (var i =0; i< document.getElementsByTagName("div").length; i++)
   {
	document.getElementsByTagName("div")[i].id = document.getElementsByTagName("div")[i].id+1;
   }

   if(newID) {
    // Entweder die uebergebene ID setzen, oder ...
    kopie.id=newID;
   } else if(kopie.id) {
    // ... falls keine neue ID übergeben wurde nur vorhandene ID loeschen
    kopie.id="";
   }
   // Kopie in das Elternelement einhängen
   obj.parentNode.appendChild(kopie);
  }
	
}

Jetzt Die frage. Wie bekomme ich es hin das das richtige Div genommen wird ?

Gruß und thx schon mal The Cow

 

[Sven Mintel]

Moin,

verzichte am Besten ganz auf die IDs, es geht auch ohne

Beispiel:

onclick= "toggleMe('netz');return toggleMe('check')"

Mit "netz" meinst du ja bestimmt das entsprechende div in dieser <tr>

auf dieses kannst du auch anders zugreifen.

Übergebe der Funktion toggleMe() 2 Parameter.
Als ersten immer this
Als 2. den Index des Ziel-DIV in dieser TR(netz ist bspw. das erste DIV in der TR, hat also den Index 0)

Der Zugriff auf das <div> innerhalb der Funktion kann dann so erfolgen:

function toggleMe(box,index)
{
  var div=box.parentNode.parentNode.getElementsByTagName('div')[index];
  //hier gehts weiter
}

 

[cow]

also ich fasses mal für mich zusammen ich muss zugeben normal mach ich nichts mit web geraffel und verzweifel auch gerade.

ich sollte also bei meinen <div> keine ids benutzen sehe ich das richtig : )
meine toggleMe soll 2 Parameter haben 1x Box was wahrscheinlich den div enthalten soll und einmal Index also der Index des divs bin ich soweit richtig ? Den Box div steuer ich mit this an ?

hab auchmal deinen Code schnipsel mir angeguckt auch auch mal testweiße reingeworfen.

var div=box.parentNode.parentNode.getElementsByTagName('div')[index];

meine frage ist warum man 2x parentNode hintereinander setzten muss


ich update meinen post. Also es geht hab nen bissel dran rumgewurschtelt nur eine kleine erklärung zu meinen fragen wäre cool
Thx Gruß The cow

Gruß und über weiter Hilfe würde ich mich freuen The Cow

 

[rd4eva]

meine frage ist warum man 2x parentNode hintereinander setzten muss

Wenn ich das noch richtig überblicke dann darum:
Das input element das das event toggleMe abfeuert ist ein Kind von th, welches wiederrum ein kind von tr ist.

Da du ja auf ein div in der aktuellen Reihe zugreifen willst musst du dich also erstmal vom input feld 2 ebenen nach oben hangeln.

<tr>
        <th>
                 <input ...>

 

[cow]

ah ok thx jetzt wird mir das ganze ein wenig klarer.

Somit meine Frage Geklärt Thx @ all