JS "clone" Ausgabe ändern

Hallo und Danke für die Antwort.

Das prinzip, wie das Script läuft habe ich verstanden, aber:

Mein Problem ist, das der erste Clon vor der Ausgangszeile eingefügt wird, der zweite, dritte usw. nach der Ausganszeile.

Ich "kopiere" ja die zweite Zeile (1=Kopfzeile 2=Inhalt). Nun sieht es etwas doof aus, wenn eine leere Zeile vor der gefüllten und 3 nach der gefüllten eingefügt werden.


Noch eine Frage dazu:
Jede Zeile der Tabelle hat 4 Spalten, in denen sich <input>-felder befinden.
Die 1te Spalte soll eine fortlaufende Nummer sein und ist disabled. (automatisches hochzählen)
Die 2te ist ein "enabledtes" Eingabefeld in das (vom Kunden) ein Faktor eingetragen .
wird.
Die 3te ist ein fester vert von z.B. 8,2 (<input>-feld disabled)
Die vierte ist das Ergebnis von feld2*feld3 (<input>-feld disabled & durch js berechnet).

ich möchte also eigentlich garnicht alle inhalte der <input>-felder löschen sondern nur die eingabe der zweiten spalte.

Gibt es dafür auch eine Lösung?
 
Hi,

nochmal "Nein".

Die erste Zeile mit Input-Feldern dient immer der Eingabe (Eingabezeile). Ist die Eingabe erfolgt, kann die Zeile gecloned werden. Das hat zur Folge, dass dieser Zeilen-Clone an das Ende der Tabelle angehängt wird. Die Inputfelder der Eingabezeile werden einfach geleert.

Dein sonstiges Vorhaben könntest du wie folgt umsetzen. Die Berechnung erfolgt im onkeyup-Event - hier wäre eventuell noch eine Verzögerung nützlich, da sonst bei jedem Tastendruck die Berechnung erfolgt.
Code: 
<html>
	<head>
	</head>

	<body name="body" id="body">
	<form>
	<table border=1>
		<tr>
			<td>Zeile1Spalte1</td>
			<td>Zeile1Spalte2</td>
			<td>Zeile1Spalte3</td>
			<td>Zeile1Spalte4</td>
		</tr>
		<tr>
			<td width="50"><input type="text" size="1" name="LUN_NR" value="1" disabled="disabled"></td>
			<td width="80"><input type="text" size="2" name="FACTOR" value="" onkeyup="calcIt(this);"></td>
			<td width="50"><input type="text" size="3" name="LUNSIZE" value="8,2 GB" disabled="disabled"></td>
			<td><input type="text" size="5" ID="RESULT" name="" disabled="disabled"></td>
		</tr>
	</table>
	<input type=button value=weiter onclick="clone_this(this)">
	<form>
	</body>

	<script language="JavaScript">
	function clone_this(objButton){
	  // Tabelle ermitteln
	  var objTable = objButton.form.getElementsByTagName("table")[0];
	  // Zweite Zeile mit Inputs clonen
	  tmpNode = objTable.rows[1].cloneNode(true);
	  // Inputs in CloneNode ermitteln
	  var arrInputs = objTable.rows[1].getElementsByTagName("input");
	  // Inputs durchlaufen
	  for(var i=0; i<arrInputs.length; i++){
            // Falls es sich um ein Textfeld handelt -> Inhalt löschen
            if(arrInputs[i].type == "text"){
    	      if(i==0) arrInputs[i].value = Number(arrInputs[i].value)+1;
              else if(i!=2) arrInputs[i].value = "";
             }
	  }
	  // CloneNode in Tabelle (tbody) einhängen
	  objTable.rows[0].parentNode.appendChild(tmpNode);
	}

  function calcIt(objInput){
    var objTR = objInput.parentNode;
    while(objTR.nodeName.toLowerCase() != "tr"){
      objTR = objTR.parentNode;
    }

    var arrInputs = objTR.getElementsByTagName("input");
    arrInputs[3].value = (parseFloat(arrInputs[1].value) * 8.2).toFixed(2);
  }
</script>
</html>
Den Wert 8.2 habe ich fest eingetragen. Willst du diesen ebenfalls aus dem Textfeld auslesen, müsstest du ihn mit einem Punkt als Dezimaltrennzeichen eintragen und wie den Wert vorher mit Hilfe von Number auslesen.

Ciao
Quaese
 
Hallo und nochmal Danke.

Ich hab jetzt das Brett vor meinem Kopf durchgesägt.

Das nur der Inhalt der zweiten Spalte gelöscht wird, habe ich jetzt so gelöst:
Code: 
var arrInputs = objTable.rows[1].getElementsByTagName("input");
			// Falls es sich um ein Textfeld handelt -> Inhalt löschen
	if(arrInputs[1].type = "text")  {
	arrInputs[1].value = "";
	}


Das Clonen hab ich jetzt auch verstanden :-)

Ich habe folgendes ausprobiert, um in der ersten Spalte automatisch hoch zu zählen:
Dabei sieht man auch, "wer wohin kopiert wird" :)

Code: 
<script language="JavaScript">
  function clone_this(objButton){
  // Tabelle ermitteln
  var tabelle = objButton.form.getElementsByTagName("table")[0];
  // Zweite Zeile mit Inputs clonen
  neueZeile = tabelle.rows[1].cloneNode(true);
  // Inputs in CloneNode ermitteln
  var arrInputs = tabelle.rows[1].getElementsByTagName("input");
  // Falls es sich um ein Textfeld handelt -> Inhalt löschen
  if(arrInputs[1].type = "text")  {
     var nummer = arrInputs[0].value;
     nummer++;
     arrInputs[0].value = nummer;
     arrInputs[1].value = "";
    }
  // CloneNode in Tabelle (tbody) einhängen
  tabelle.rows[1].parentNode.appendChild(neueZeile);
  }
</script>

Kann man bei folgendem Code:
Code: 
neueZeile = tabelle.rows[1].cloneNode(true);

... auch sagen, das die letzte Zeile geclont wird, den clone leeren und ans ende anhängen?

soweit reicht mein JS-verständnis leider noch nicht.
 
Zuletzt bearbeitet:
Hi,

hast du dir den Quellcode aus meinem letzten Beitrag mal angesehen? Dort ist bereits das Löschen und Hochzählen realisiert.

Ausserdem habe ich gestern schon auf einen Fehler in meinem Ausgangscode hingewiesen und wie er ausgebessert werden kann.
Code: 
if(arrInputs[1].type == "text")

Wichtig sind die zwei Gleichheitszeichen, durch die ein Vergleich durchgeführt wird. Mit nur einem erfolgt eine Zuweisung.

Ciao
Quaese
 
Hallo und ein weiteres mal Vielen Dank.

Ja ich habe deinen leitzen Beitrag gelesen.
Das doppel == habe ich inzwischen angepasst.
Das hochzählen und löschen habe ich erst auf meine Weise richtig verstanden... Sorry für das doppelte Posten.

Aber meine eigentliche Frage war folgende:
Kann man auch sagen, das die letzte Zeile geclont wird, den clone leeren und ans ende anhängen?
Zum Vergrößern anklicken....

Was momentan nämlich noch irgendwie unschön ist, ist der Fakt, das die neuen Eingaben immer in der ersten Zeile gemacht werden.
Sieht doof aus und verwirrt den Kunden, der das Formular am ende ausfüllen muss.

Meine Idee dazu war, die Tabelle mit dem Clonen und dem Anhängen auch zu sortieren. --> So würde die neue Zeile mit der höchsten Nummer immer unten stehen.
Scheitern tut es jetzt leider nur noch an der Umsetzung.
 
Hi,

versuch es mal mit der folgenden Clone-Routine:
Code: 
	function clone_this(objButton){
	  // Tabelle ermitteln
	  var objTable = objButton.form.getElementsByTagName("table")[0];
	  // Letzte Zeile mit Inputs clonen
	  tmpNode = objTable.rows[objTable.rows.length-1].cloneNode(true);
	  // Inputs in CloneNode ermitteln
	  var arrInputs = tmpNode.getElementsByTagName("input");
	  // Inputs durchlaufen
	  for(var i=0; i<arrInputs.length; i++){
	    // Falls es sich um ein Textfeld handelt -> Inhalt löschen
	    if(arrInputs[i].type == "text"){
	      if(i==0) arrInputs[i].value = Number(arrInputs[i].value)+1;
	      else if(i!=2) arrInputs[i].value = "";
	    }
	  }
	  // CloneNode in Tabelle (tbody) einhängen
	  objTable.rows[0].parentNode.appendChild(tmpNode);
	}

Die Zeilen mit den Änderungen habe ich fett hervorgehoben. Es wird nun die letzte Zeile der Tabelle gecloned und deren Textfelder entsprechend manipuliert.

Ciao
Quaese
 
Du bist wirklich Super!

Ich hatte schon aufgegeben und den Clone einfach in eine andere Tabelle eingehangen. Das war nicht schön, ging aber :-)

Des so einfach ist, hätte ich nicht gedacht.

1000 mal Danke!
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück