✔ Tabellezeilen zu vorhandener Tabelle hinzufügen

atlantyz

atlantyz

Erfahrenes Mitglied
Hallo Leute,

ich komme bei einem kleinen Javascript Problem nicht weiter, weil ich damit bisher noch nicht gearbeitet habe:

ich möchte in einer bestehenden Tabelle nachdem in der letzten Zelle die "Tab- Taste" gedrückt wird, eine weitere Zeile anhängen (so, wie bei Word).

Das Drücken der Tab-Taste habe ich nun schon soweit, dass es funktioniert. Aber das anzeigen der neuen Tabellenzeile klappt noch nicht, weil ich momentan noch keinen Plan habe, wie ich das anstellen muss.

Meine Tabelle sieht beim ersten Aufruf folgendermaßen aus:

Code: 
<table id = "bestelltabelle" border =0 cellpadding=2 cellspacing=2 style = 'empty-cells:show'>
<tr bgcolor=#C8C8F0>
   <th style="width:5">Anzahl:</th>
   <th style="width:20">Artikel:</th>
   <th style="width:10">E-Preis netto:</th>
   <th style="width:10">Summe netto:</th>
   <th style="width:10">E-Preis brutto:</th>
   <th style="width:10">Summe brutto:</th>
   <th style="width:10">geliefert am:</th>
   <th>Rechnungs-Nummer:</th>
</tr>
<tr>
   <td><input type="text" name="anzahl1" value="" size = "5"></td>
   <td><input type="text" name="artikel1" value="" size = "20"></td>
   <td><input type="text" name="epreisn1" value="" size = "10"></td>
   <td><input type="text" name="spreisn1" value="" size = "10"></td>
   <td><input type="text" name="epreisb1" value="" size = "10"></td>
   <td><input type="text" name="spreisb1" value="" size = "10"></td>
   <td><input type="text" name="geliefert_am1" value="" size = "10"></td>
   <td><input type="text" name="rechnungs_nr1" value="" onkeydown = "tastepruefen(event)"></td>
</tr>
</table>

Sobald man in der letzten Zelle ist und die "Tab- Taste" drückt, wird ein Ereignis ausgelöst, welches eine neue Zeile anlegen soll. Die Zeile soll im Grunde genauso aussehen wie die erste zeile, nur die Namen der einzelnen Input Felder sollen nun einen höheren Wert haben (dies soll pro Zeile erhöht werden).

Ich habe mir "insertRow" schoneinmal angeschaut, allerdings habe ich das nicht so ganz verstanden. Vielleicht kann mir ja jemand von euch sagen, ob ich das mit insertRow hinbekommen kann oder damit ganz auf dem Holzweg bin.

Gruß Joey
 
So, ich habe noch ein bisschen rumprobiert und folgendes angepasst:

Code: 
<table border =0 cellpadding=2 cellspacing=2 style = 'empty-cells:show'>
<thead>
<tr bgcolor=#C8C8F0>
   <th style="width:5">Anzahl:</th>
   <th style="width:20">Artikel:</th>
   <th style="width:10">E-Preis netto:</th>
   <th style="width:10">Summe netto:</th>
   <th style="width:10">E-Preis brutto:</th>
   <th style="width:10">Summe brutto:</th>
   <th style="width:10">geliefert am:</th>
   <th>Rechnungs-Nummer:</th>
</tr>
</thead>
<tbody id = "bestelltabelle">
<tr>
   <td><input type="text" name="anzahl1" value="" size = "5"></td>
   <td><input type="text" name="artikel1" value="" size = "20"></td>
   <td><input type="text" name="epreisn1" value="" size = "10"></td>
   <td><input type="text" name="spreisn1" value="" size = "10"></td>
   <td><input type="text" name="epreisb1" value="" size = "10"></td>
   <td><input type="text" name="spreisb1" value="" size = "10"></td>
   <td><input type="text" name="geliefert_am1" value="" size = "10"></td>
   <td><input type="text" name="rechnungs_nr1" value="" onkeydown = "tastepruefen(event)"></td>
</tr>
</tbody>
</table>

Die Funktion dazu sieht folgendermaßen aus:

Code: 
function tastepruefen(ereignis)
{
	if (ereignis.which == 9)
	{
	ZeileEinfuegen();
	}
}

function ZeileEinfuegen()
{
	var tabelle, zeile, spalte, input;
	zeile = document.createElement("tr");
	 for (var i=0;i<8;i++)
	 {
	tabelle = eval(document.getElementById("bestelltabelle"));
	  Zeile += 1;
	  spalte = document.createElement("td");
	  input = document.createElement("input");
	  input.type = 'text';
	  input.name = 'anzahl'+Zeile;
	  if (i==0)input.size = '5';
	  if (i==1) input.size = '20';
	  if (i>=2) input.size = "10";
	  if (i==7) input.size = "20";
	  spalte.appendChild(input);
	  zeile.appendChild(spalte);
	  tabelle.appendChild(zeile);
	 }
	  
}

Nun habe ich noch das Problem, dass das letzte Input- Feld wieder die Funktion "tastepruefen" aufrufen soll und zwar beim Event "onkeydown". Wie kann ich das noch in meine bestehende Funktion integrieren? Oder geht das nicht?
 
Das ganze geht auch etwas kürzer:
Javascript: 
function tastepruefen(ereignis,caller)
{
	var code;	
	if (ereignis.keyCode) code = ereignis.keyCode;
	else if (ereignis.which) code = ereignis.which;	
    if (code == 9)
    {
		caller.onkeydown = null;
		cloneRow(caller.parentNode.parentNode);
    }
}

function cloneRow(row){
	var dolly = row.cloneNode(true);
	for(var i = 0; i < dolly.childNodes.length;i++){
		var currentNode = dolly.childNodes[i];
		if(currentNode.nodeName == "TD"){
			var inputElement = currentNode.childNodes[0];
			var iName = inputElement.name;			
			inputElement.name = iName.substring(0,iName.search(/\d+/)) + ((iName.substring(iName.search(/\d+/),iName.length) | 0) + 1);			
		}	
	}
	row.parentNode.appendChild(dolly);
}

Funktioniert in FF / Chrome / Opera. Der einzige der wieder mal nicht mitspielt ist der gute alte IE ( so viel zum Thema im IE9 wird alles besser) aber mit dem wollte ich mich jetzt nicht mehr rum schlagen.
 
Hi,

danke für deine Mühen...

aber mal abgesehen, dass ich grad gar net kapiere, was du da tust, funktioniert es bei mir auch nicht.

Fehlermeldung: caller is not defined.

Wozu brauche ich den und was muss ich dem übergeben?

Warum fragst du in der Funktion "tastepruefen" nochmal eregnis.keycode ab und nicht einfach nur "if (ereignis.which == 9)"?
 
Fehlermeldung: caller is not defined.

Wozu brauche ich den und was muss ich dem übergeben?
Zum Vergrößern anklicken....
Hups Sorry vergessen.
Ich übergebe im onkeydown noch "this" an die tastepruefen Funktion.
HTML: 
<input type="text" name="rechnungs_nr1" value="" onkeydown = "tastepruefen(event,this)"

Wozu brauche ich den und was muss ich dem übergeben?
Zum Vergrößern anklicken....
Den brauchst du weil in meiner Version cloneNode verwendet wird. Caller ist also im endeffekt das aufrufende Objekt das geklont werden soll.

Warum fragst du in der Funktion "tastepruefen" nochmal eregnis.keycode ab und nicht einfach nur "if (ereignis.which == 9)"?
Zum Vergrößern anklicken....
Weil der IE bei ereignis.which nicht mitspielt.
 
Ah, vielen Dank. Das hat jetzt funktioniert.

Zwei Fragen zum Verständnis habe ich noch:

1. Wenn die erste Zeile kopiert wird, werden dann auch alle Ereignisse mitkopiert, die ich evtl. noch hinzufügen würde (z.B. eine Prüfung der Eingabe bei Verlassen des Eingabefeldes)?

2. Haben in der zweiten Zeile die Input Felder nicht den gleichen Namen wie in der ersten Zeile, wenn ich die kopiere? Edit: hab aus den Namen der input-Felder ein Array gemacht. Das funktioniert besser :-)
 
Zuletzt bearbeitet:
Auwei Auwei. Tabellenzeilen und Spalten werden speziell erzeugt ueber die Tabellenelemente.

var table = getElementById("TabellenID"); // die ID der Tabelle
var tr = table.insertRow(index); // indexnummer oder -1 fuer hintendran
var td = row.insertCell(index); // indexnummer oder -1 fuer hintendran

insertRow() und insertCell() erzeugen das jeweilige Element an der angegebenen Position. Die Rueckgabewerte sind wieder als Knoten verwendbar. Um der Zelle also was einzusetzen einfach col.appendChild(element);

So und nicht anders sollte man das machen.
 
Zuletzt bearbeitet:
@chef Du hast schon gelesen worum es geht oder?
1. Wenn die erste Zeile kopiert wird, werden dann auch alle Ereignisse mitkopiert, die ich evtl. noch hinzufügen würde (z.B. eine Prüfung der Eingabe bei Verlassen des Eingabefeldes)?
Zum Vergrößern anklicken....
Bei meiner Variante ja. Bis auf den Internet Explorer. Der macht wieder nur quatsch und bräuchte noch eine extra Behandlung.

2. Haben in der zweiten Zeile die Input Felder nicht den gleichen Namen wie in der ersten Zeile, wenn ich die kopiere? Edit: hab aus den Namen der input-Felder ein Array gemacht. Das funktioniert besser
Zum Vergrößern anklicken....
Nö. Das wird hier erledigt:
Javascript: 
inputElement.name = iName.substring(0,iName.search(/\d+/)) + ((iName.substring(iName.search(/\d+/),iName.length) | 0) + 1);
 
Hm, eigentlich habe ich es gelesen aber womoeglich versteht ihr unter einfuegen einer neuen Zelle etwas anderes als ich. Ich haette jetzt bei meinem Verstaendnis halt das Objekt 'Tabelle' abgefragt und mich dann an den rows und Zellen duchgehangelt.

Code: 
tabelle = eval(document.getElementById("bestelltabelle"));
row = tabelle.rows[count(tabelle.rows)-1];
newID = count(row.cells-1);
td = row.insertCell(-1);
inputElement = document.createElement("input");
inputElement.type = "text";
inputElement.value = "";
inputValue.id = Inputname+newID; // ID verlaeuft dann halt Inputname0, Inputname1, ... InputnameN
inputValue.onkeydown = fncName;
td.appendChild(inputValue);

Aber das wuerde ja nur Sinn machen, wenn ich des Lesens maechtig waere.
 
Es geht (generell gesprochen) ganz einfach darum ein Objekt zu erstellen das alle Eigenschaften eines anderen Objekts besitzt.
Mit anderen Worten es soll ein Objekt geklont werden. Da macht es einfach keinen Sinn ein komplett neues Objekt zu erstellen und dann manuell alle Eigenschaften des Original-Objekts abzufragen und auf das neue Objekt anzuwenden. Schon garnicht wenn eine Methode existiert die all das für einen übernimmt.
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück