JS "clone" Ausgabe ändern

miBA110 · 1. Mai 2009

Hallo,
ich schreibe gerade eine kleine Homepage zum Erstellen eines Vertretungsplans für unsere Schule. Zu Anfang muss ich jedoch gestehen, dass ich mich bis jetzt nur mit html und php beschäftigt habe und nicht mit JS. Ich möchtet gerne ein "Liste" aus Textfeldern erstellen, die dynamisch sich erweitern soll. Es sollte so aussehen, dass man über Textfelder Werte in eine die Liste eintagen kann. Mein bisheriges Ergebniss sieht so aus:

Code:

<html>
<head>
<title>Test</title>
<script type="text/javascript">
<!--
function clone_this(objButton)
{
    tmpNode = objButton.form.elements[0].parentNode.cloneNode(true);
    objButton.form.insertBefore(tmpNode,objButton); 
}
//-->
</script>
</head>
<body>
<table width="800" border="0">
  <tr>
    <td>
    <form>
    <div>
    <input name="klasse[]" type="text" size="5" maxlength="3">
     <input name="stunde[]" type="text" size="5" maxlength="2">
     <input name="lehrer[]" type="text" size="5" maxlength="3">
     <input name="art[]" type="text" size="5" maxlength="3">
     <input name="info[]" type="text" size="20">
     </div>
    <br>
    <input value="eintragen" onClick="clone_this(this)" type="button">
    </form>
</td>
  </tr>
  <tr>
    <td><br>
    Zeile 2</td>
  </tr>
</table>


</body>
</html>

Wie ist es nun möglich die Ausgabe in die zweite Zeile der Tabelle zu schrieben und nicht unter die ersten Textfelder. Es müsste auch noch nach dem Klonen die Werte aus den ersten Textfelder entferntwerden. Wie lässt sich dies am besten lösen? Vielen Dank schon eine im Vorraus.

MfG
Michael Schäfer

Quaese · 1. Mai 2009

Hi,

da du ja für jedes dynamische Anlegen einer neuen Input-Sektion eine neue Tabellenzeile benötigst, solltest du diese auch mit den dafür vorhandenen Methoden (insertRow, createElement) erzeugen.

Die Inputfelder innerhalb des CloneNodes kannst du mit getElementsByTagName ermitteln. Dies gibt dir ein Array mit den Inputobjekten zurück, das du durchlaufen und gemäss deinen Anforderungen bearbeiten kannst.

Ich würde das HTML-Dokument etwas anders organisieren und die gesamte Tabelle in ein form-Tag packen. So kannst du zum einen alle Felder in einem Formular versenden, zum anderen fällt der Zugriff auf die Tabelle leichter.

Beispiel:

Code:

<html>
<head>
<title>www.tutorials.de</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta name="author" content="Quaese">
<script type="text/javascript">
<!--
function clone_this(objButton){
  // Tabelle ermitteln
  var objTable = objButton.form.getElementsByTagName("table")[0];
  // Neue Zeile einfügen
  var objRow = objTable.insertRow(objTable.rows.length);
  // Neue Zelle generieren
  var objTD = document.createElement("td");
  // DIV mit INPUTs clonen
  var tmpNode = objTable.rows[0].cells[0].getElementsByTagName("div")[0].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")
      arrInputs[i].value = "";
  }

  // CloneNode in Zelle einhängen
  objTD.appendChild(tmpNode);
  // Zelle in Zeile einhängen
  objRow.appendChild(objTD);
}
//-->
</script>
</head>
<body>
<form>
  <table width="800" border="0">
    <tr>
      <td>
        <div>
          <input name="klasse[]" type="text" size="5" maxlength="3">
          <input name="stunde[]" type="text" size="5" maxlength="2">
          <input name="lehrer[]" type="text" size="5" maxlength="3">
          <input name="art[]" type="text" size="5" maxlength="3">
          <input name="info[]" type="text" size="20">
        </div>
        <br>
        <input value="eintragen" onClick="clone_this(this)" type="button">
      </td>
    </tr>
  </table>
</form>
</body>
</html>

Ciao
Quaese

miBA110 · 1. Mai 2009

Vielen Dank für die Hilfen. Genau so habe ich es mir etwa vorgestellt. Jedoch wird in Zeile 20 bis 25 ja der Inhalt aus der neu erstellten Zelle gelöscht. Wie kann ich es einrichten, dass der Inhalt aus den Quellen Textfeldern gelöscht wird? Wäre es auch möglich den neu erstellten Textfeldern eine neue "class" zu zuweisen?

Quaese · 1. Mai 2009

Hi,

wenn du die Quellfelder löschen willst, statt der Zielfelder, ersetzt du die Zeile

Code:

  // Inputs in CloneNode ermitteln
  var arrInputs = tmpNode.getElementsByTagName("input");

durch

Code:

  // Inputs in CloneNode ermitteln
  var arrInputs = objTable.rows[0].cells[0].getElementsByTagName("div")[0].getElementsByTagName("input");

Eine neue Klasse kannst du über die Eigenschaft className zuweisen. Hierzu müsstest du wie schon beschrieben die Inputfelder durchlaufen und entsprechend modifizieren.

Ciao
Quaese

miBA110 · 1. Mai 2009

Vielen Dank, dass du mir auch ohne meines Wissens in JS geholfen hast. Jetzt kann es weiter gehen.

miBA110 · 3. Mai 2009

Hallo, ich hätte jetzt doch noch eine Frage bezüglich des Scripts.
Der Quellencode meiner Seite sieht folgend aus:

Code:

<html>
<head>
<link href="css/admin.css" rel="stylesheet" type="text/css">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style media="all" type="text/css">@import "css/allit.css";</style>
<SCRIPT type="text/javascript" src="calendar.js?random=20060118"></script>
<script type="text/javascript">
<!--
function clone_this(objButton){
  // Tabelle ermitteln
  var objTable = objButton.form.getElementsByTagName("table")[0];
  // Neue Zeile einfügen
  var objRow = objTable.insertRow(objTable.rows.length);
  // Neue Zelle generieren
  var objTD = document.createElement("td");
  // DIV mit INPUTs clonen
  var tmpNode = objTable.rows[0].cells[0].getElementsByTagName("div")[0].cloneNode(true);
  // Inputs in CloneNode ermitteln
  var arrInputs = objTable.rows[0].cells[0].getElementsByTagName("div")[0].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")
      arrInputs[i].value = "";
  }
  // CloneNode in Zelle einhängen
  objTD.appendChild(tmpNode);
  // Zelle in Zeile einhängen
  objRow.appendChild(objTD);
}
//-->
</script>
<link type="text/css" rel="stylesheet" href="css/calendar.css?random=20051112" media="screen"></LINK>
</head>
<body>

<h4>Datum:</h4>


      <form name="form1" method="post" action="?id=2&gn=1-1">
          <p>&nbsp;Vertretungsplan f&uuml;r: 
            <input type="text" value="" readonly name="theDate2">
<input type="button" value="" onClick="displayCalendar(document.forms[0].theDate2,'dd.mm.yyyy',this)" style="background-color: transparent; background-image: url(img/cal.png); width: 16px; height: 16px;border: 0px;">
          </p>

<h4>&Auml;nderungen:</h4>

<table class="listing" cellpadding="0" cellspacing="0">
					<tr>
						<th class="first" width="90">Klasse</th>
						<th>Stunde</th>
						<th>Lehrer</th>
						<th>Art</th>
						<th class="last">Kommentar</th>
					</tr>
         <div>
                        <tr>
						<td><input name="klasse[]" type="text" size="2" maxlength="3" align="middle" style="background-color:#FF6;"></td>
						<td><input name="stunde[]" type="text" size="2" maxlength="2" style="background-color:#99F;"></td>
						<td><input name="lehrer[]" type="text" size="2" maxlength="3" style="background-color:#FF6;"></td>
						<td><input name="art[]" type="text" size="2" maxlength="1" style="background-color:#99F;"></td>
						<td><input name="info[]" type="text" size="25" style="background-color:#FF6;"> </td>    
                        </tr>                    
        </div>
</table>

        <div class="ebutton">
          <p>
            <input value="" onClick="clone_this(this)" type="button" style="background-color: transparent; background-image: url(img/add.png); width: 24px; height: 24px;border: 0px;"></p></div>
    
         <p class="nbutton">
           <label>
             <input type="submit" name="button" id="button" value="" style="background-color: transparent; background-image: url(img/next.png); width: 24px; height: 24px;border: 0px;">
           </label>
         </p>
    </form>


</body>
</html>

Wie ist es möglich den Inhalt der <div> zu kopieren (also wie aktuell nur incl. Tabelle)?

MfG
Michael

Quaese · 4. Mai 2009

Hi,

ein Konstrukt der Form

Code:

<table>
  <div>
    <tr><td>...</td></tr>
  </div>
</table>

ist kein gültiges HTML. Ein DIV an dieser Stelle ist nicht erlaubt.

Wenn ich dein Problem richtig verstanden habe, willst du die zweite Zeile der Tabelle mit den Input-Feldern clonen und ans Ende einfügen.

Versuch es mal mit der nachstehenden angepassten Routine.

Code:

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")
      arrInputs[i].value = "";
  }
  // CloneNode in Tabelle (tbody) einhängen
  objTable.rows[1].parentNode.appendChild(tmpNode);
}

Ciao
Quaese

miBA110 · 5. Mai 2009

Dank das hat geholfen. Keine Ahnung warum ich da nicht selber darauf gekommen bin. Zwei Bücher u diesem Thema sind auch schon auf dem Weg zu mir, sodass ich hier nicht weiter "nerven" muss.

stuff08 · 11. Mai 2009

Hallo.

Ich habe/hatte bis eben noch das gleiche Problem.
Ihr seid echt gut. DANKE!

Jetzt hab ich das alles minimal angepasst und ein neues Problem:

Der erste "Clone" wird vor die geclonete zeile gepackt, alle weiteren danach.

Ich bin noch ein Neuling mit JS, könntet ihr mir erklären, wo das problem liegt?
Vielen Dank!

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="" onchange=""></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")
	arrInputs[i].value = "";
	}
	// CloneNode in Tabelle (tbody) einhängen
	objTable.rows[0].parentNode.appendChild(tmpNode);
	}
</script>
</html>

Quaese · 11. Mai 2009

Hi,

nein, das Script macht schon das richtige. Die Inputs mit den Werten werden mitsamt der Tabellenzeile gecloned und am Ende der Tabelle eingehängt. Die Werte in der Ausgangszeile werden aus den Inputs gelöscht.

Wenn du in ein Eingabefeld in der Ausgangszeile mal einen Wert eingibst und dann clonest, siehst du die Funktionsweise.

Ein Fehler haben die von mir gepostete Script dennoch. Aus

Code:

if(arrInputs[i].type = "text")

muss

Code:

if(arrInputs[i].type == "text")

werden. Diese Fehler sind an den betreffenden Stellen bereits ausgebessert.

Ciao
Quaese

JS "clone" Ausgabe ändern

miBA110

Grünschnabel

Quaese

Moderator

miBA110

Grünschnabel

Quaese

Moderator

miBA110

Grünschnabel

miBA110

Grünschnabel

Quaese

Moderator

miBA110

Grünschnabel

stuff08

Grünschnabel

Quaese

Moderator

Neue Beiträge