letztes TR kopieren

T

Trunks153

Grünschnabel
Hi @ all
Leider kenne ich mich nicht mit JavaScript aus, aber ich sollte ein Script haben welches mir immer das letzt <TR> einer Tabelle clont.

Beschreibung:
Ich habe eine Tabelle die folgendermaßen aussieht:
HTML: 
<table cellspacing="0px" cellpadding="0px" id="tblPersons">
	<thead>
		<tr>
		<th style="display:none">inventory_id</th>
		<th style="display:none">object_id</th>
		<th style="display:none">id</th>
	        <th>role_id</th>
		<th>ext_id</th>
		<th>Vorname</th>
		</tr>
	</thead>
	<tbody id="clone">
		<tr class="rowNew">
		<td style="display:none"><input type="text" value="50"></td>
		<td style="display:none"><input type="text" value="1"></td>
		<td style="display:none"><input type="text" value="1"></td>
		<td><input type="text" size="6"></td>
		<td><input type="text" size="6"></td>
		<td><input type="text"></td>
		</tr>
	</tbody>
</table>
Wenn ich nun auf die zweite Zeile klicke sollte alles im <tbody> Bereich kopiert und drangehängt werden.
Ich hoffe jemand kann mir helfen
danke schon mal im voraus!

gruß
 
d.h. du willst im <tbody> ein weiteres <tr> haben?

Wenn ja, hol dir mit getElementsByTagname oder wie du willst den tbody Knoten raus, anschließend läufst von lastChild bis previousChild vor um <tr> zu finden, wenn das hast, einfach nur noch .cloneNode und tbodyKnoten.appendChild.


sollte an sich kein Problem sein. (möglicherweise gibts noch einfachere Methoden, die würd mir jedoch grad einfallen ^^)

Ach ja, du könntest auch alle tr's innerhalb des Tbody mit getElementsByTagName auslesen und da dann das letzte ansprechen, is vl leichter und performanter als von hinten nach vorne lesen ;)

lg Masda
 
danke für deine Hilfe. Ich hab jetzt eine Möglichkeit gefunden. sie sieht folgender maßen aus:

Code: 
function addRowToTable(obj, setFocus) {
	var oTbl = document.getElementById('tblPersons');
	var row = obj.cloneNode(true);
	if (ie()) {
		if (obj == oTbl.lastChild.lastChild) {
			rowNew = oTbl.lastChild.appendChild(row);
			if (setFocus) {
				rowNew.children(3).firstChild.focus();
			}
		}
	}
	else {
		if (obj == oTbl.childNodes[3].lastChild.previousSibling) {
			var text = obj.nextSibling.cloneNode(true);
			rowNew = oTbl.childNodes[3].appendChild(row);
			oTbl.childNodes[3].appendChild(text);
			if (setFocus) {
				rowNew.childNodes[7].firstChild.focus();
			}
		}
	}
	initRow(rowNew);
}

und mit der Funktion initRow wird die angehängte Zeile zurückgesetzt (value="")
Code: 
function initRow(row) {
	var countOfElements = row.childNodes.length;
	var n = 0;
	while (n < countOfElements) {
		if (row.childNodes[n].nodeType == 1) {
			row.childNodes[n].firstChild.value = "";
		}
		n++;
	}
}
 
Hi,

noch eine weitere Möglichkeit, die letzte Zeile einer Tabelle mit der ID tblPersons zu clonen und
in die bestehende Struktur einzuhängen. Verwendet wird hierfür das Objekt row.
Code: 
function cloneTR(){
  // Letzte Tabellenzeile clonen
  var objClone = document.getElementById("tblPersons").rows[document.getElementById("tblPersons").rows.length-1].cloneNode(true);

  // Inputinhalte löschen
  for(var i=0; i<objClone.getElementsByTagName("input").length; i++){
    objClone.getElementsByTagName("input")[i].value = "";
  }

  // Knoten einhängen
  document.getElementsByTagName("tbody")[0].appendChild(objClone);
}
Ciao
Quaese
 
Hallo

Ich könnte eure Hilfe sehr gut gebrauchen! ;) Ich versuchte eine Lösung mit dem Vorschlag von Quaese zu realsieiren. Scheiterte aber in soweit, dass ich nciht weiss wie ich nun diese Daten aus dem Post auslesen soll, so dass ich für jedes input Feld der neuen Zeile auch die Werte erhalte. Momentan erhalte ich immer nur vom letzten <tr> etwas aus dem POST.

Vielen Dank für eure Hilfe!

Code: 
function cloneTR(){
  // Letzte Tabellenzeile clonen
  var objClone = document.getElementById("select_employee").rows[document.getElementById("select_employee").rows.length-1].cloneNode(true);

  // Inputinhalte löschen
  for(var i=0; i<objClone.getElementsByTagName("input").length; i++){
    objClone.getElementsByTagName("input")[i].value = "";
  }

  // Knoten einhängen
  document.getElementsByTagName("tbody")[0].appendChild(objClone);
}

HTML: 
<table id='select_employee'>
<form action='software_ok.php' method='POST'>
  <tr>
    <th>Test</th>
    <th>Test1</th>
    <th width=10%>Test2</th>
    <th width=10%>Test3</th>    
    <th width=14%>Test4</th>
  </tr>
  <tr>
    <td><input class='input' type='text' size='50' name='test' value='' /></td>
    <td><select class='input' name="test1"><option value="lala"> lala </option><option value="SOLOA"> SOLA </option></select></td>
    <td><input class='input' type="checkbox" name="test2" value="test2"></td>
    <td><input type="checkbox" name="test3" value="test3"> </td>
    <td><input type="checkbox" name="test4" value="test4"></td>
  </tr>
</table>
 
Zuletzt bearbeitet:
Hi,

ergänze im HTML-Teil die Namen der erforderlichen Formularelemente durch leere eckige Klammern. Damit
erhälst Du im Auswertungsscript Arrays.
Code: 
<form action='get_formdata_test.php' method='POST'>
<table id='select_employee'>
  <tr>
    <th>Test</th>
    <th>Test1</th>
    <th width=10%>Test2</th>
    <th width=10%>Test3</th>
    <th width=14%>Test4</th>
  </tr>
  <tr>
    <td><input class='input' type='text' size='50' name='test[]' value='' /></td>
    <td><select class='input' name="test1[]"><option value="lala"> lala </option><option value="SOLOA"> SOLA </option></select></td>
    <td><input class='input' type="checkbox" name="test2[]" value="test2"></td>
    <td><input type="checkbox" name="test3[]" value="test3"> </td>
    <td><input type="checkbox" name="test4[]" value="test4"></td>
  </tr>
</table>
</form>
Verwendest Du zur Auswertung zum Beispiel PHP, könntest Du folgendermassen auf die Elemente zugreifen:
Code: 
echo("<p>".$_POST['test'][0]."</p>"); // erste Komponente des Elementes mit dem Name test
Ciao
Quaese
 
Zuletzt bearbeitet:
Hallo

Danke für deine Hilfe! Deine Lösung funktioniert auch, aber leider nur im Internet Explorer. Ich habe eine Schlaufe erstellt welche die Eingaben ausgibt. Dies geht im IE ohne Probleme. Beim Firefox gibt er aber immer nur den ersten Wert aus, die anderen lässt er aussen vor. Egal ob ich direkt zugreife, wie du es schreibt oder es per Schleife versuche.

Code: 
$i = '0';

for($g = '0' ; $g < 10 ;$g++)
{

$test = $_POST['test'][$i];
$test1 = $_POST['test1'][$i];
$test2 = $_POST['ltest2'][$i];
$test3 = $_POST['test3'][$i];
$test4 = $_POST['test4'][$i];

$i++;

echo $test;
echo "<br>";

}

Mache ich etwas falsch? Danke für deine Hilfe.
 
Du musst $i inkrementieren, und nicht $g , würde ich mal sagen :)

Abgesehen davon müssen die Klammern hinter das name-Attribut, und nicht zum value....bei Quaese ist das z.T. aber so...falls du das genauso übernommen hast.
 
Hallo

Nein, ich habe die Klammern immer hinter dem name Attribut gemacht.

Habe die Ausgabe jetzt mit einer andren Schleife probiert:

Code: 
foreach ( $_POST['test'] as $test)            
{                                                
echo "$test";                                     
}

Bei IE gibt er mir alle Werte aus, bei FireFox nur einen.

Bitte um weitere Hilfe! :)

Grüsse MTH
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück