Tabellenzeile per Javascript hinzufügen

[shadoan]

Hallo, ich habe folgendes Problem. Ich habe eine Tabelle, in der es eine Zeile gibt, welche ein Textfeld beinhaltet. Dieses wird per Ajax-Funktion mit dem Inhalt einer Datenbank gefüllt. Hier mal der Code.

<table id="equipment" width="700">
<tr>
<th colspan="2">Ausr&uuml;stungsgegenst&auml;nde</th>
</tr>
<tr id="row1"> 
<td width="350">
<input type="text" size="40" id="equipment[0]" onkeyup="search_inventory_objects('equipment_0','{$head.customer_id}')" name="equipment_0">
<div id="equipment_0_suggest">Bitte Objektnamen eingeben!</div>
</td></tr> 
</table>

Nun möchte ich der Tabelle gerne per Funktion (z.B. mit einem Klick auf einen Link) eine weitere Zeile hinzufügen: (also z.B. ein Link "weiteres Objekt hinzufügen")

<tr id="row2"> 
<td width="350">
<input type="text" size="40" id="equipment[1]" onkeyup="search_inventory_objects('equipment_1','{$head.customer_id}')" name="equipment_1">
<div id="equipment_1_suggest">Bitte Objektnamen eingeben!</div>
</td></tr>

Ich habe schon einige Funktionen gefunden per Google, wo er mir Tabellenzeilen erstellt. Problem ist, dass er dann einfach die alte Zeile kopiert und die Zähler nicht erhöht.

Kann mir da jemand helfen?

 

[struppi]

Heißt helfen, ein Skript für dich schreiben? Oder hast du auch ein konkretes Problem, bei dem wir dir helfen können?

 

[Gilles]

Du wirst einen globalen Id-Counter erstellen müssen, der nach jedem klicken erhöht wird.
Um deine Daten einzufügen, musst du per DOM auf die tabelle zugreifen und dann ein appendChild ausführen. Oder falls du deine Reihe als Text wieder kriegst müsstest du sowas wie: innerHTML += meinZeugs; anwenden.
Aber es wäre von Vorteil genaueres zu wissen. Was hast du vor und wie können wir dir helfen? :)

 

[shadoan]

Nein, natürlich sollt ihr mir das Script nicht schreiben. Ich hab auch schon, wie von Gilles vorgeschlagen, per document.getElementByID.innerHTML den Inhalt ausgelesen, den ich haben will. Ich erhalte dann logischerweise das hier zurück.

<tr id="row1"><td width="350">
<input type="text" size="40" id="equipment[0]" onkeyup="search_inventory_objects('equipment_0','{$head.customer_id}')" name="equipment_0">
<div id="equipment_0_suggest">Bitte Objektnamen eingeben!</div>
</td></tr>

Das habe ich bereits in einer Variable in der Funktion, mit der ich den HTML-Code der Zeile auslese, gespeichert. Nennen wir sie "htmltext".

So, nun weiß ich leider nicht, wie ich diesen Text in "htmltext" verändern und aus row1 = row2 machen kann und aus jeder 0 bei equipment eine 1. Mehr will ich eigentlich gar nicht.

Hintergrund: Die Tabelle steckt in einem Formular, und man kann sich nun aus einer Datenbank bestimmte Gegenstände auslesen und in dieses Formularfeld einfügen. Dann soll man eben ein neues Formularfeld einfügen und dort dann auch wieder per Ajax die Datenbank durchsuchen können.

Zum schluss beim Absenden möchte ich dann so ein Array erhalten.

[equipment]
[0] = Gegenstand1
[1] = Gegenstand2
[2] = Gegenstand3
usw.

 

[shadoan]

So, ich bin schon ein Stück weiter. Habe das jetzt mit dem Suchen-und-Ersetzen hinbekommen. Aber nun ist leider folgendes. Ich erhalte nach dem Suchen-Ersetzen-Durchlauf das hier zurück:

<tr id="row2"><td width="350">
<input type="text" size="40" id="equipment[1]" onkeyup="search_inventory_objects('equipment_01,'{$head.customer_id}')" name="equipment_1">
<div id="equipment_1_suggest">Bitte Objektnamen eingeben!</div>
</td></tr>

Und nun habe ich die Funktion AddRowsToTable, der ich die id der Tabelle übergebe (hier: equipment, und den Wert der Tabellenreihe, an die angehängt werden soll (also row1).

Hier die Funktion:

function AddRowsToTable(id, rid) { 
var tbl = document.getElementById(id); 
var lastRow = tbl.rows.length; 
var iteration = lastRow; 
var row = tbl.insertRow(lastRow); 
var new_row = tbl.rows.length-1;

var cellRight = row.insertCell(0); 
 
 
plus=1;
var num = SuchenUndErsetzen(rid, 'row', '');
var erhoeher;
plusrunde = parseInt(num);
erhoeher = parseInt(plus);
var Runde = plusrunde+plus;
var txt = document.getElementById(rid).innerHTML;
var txt = SuchenUndErsetzen(txt, 'row' + num, 'row' + Runde);
var txt = SuchenUndErsetzen(txt, 'equipment_' + num, 'equipment_' + Runde);
var txt = SuchenUndErsetzen(txt, 'equipment[' + num + ']', 'equipment[' + Runde + ']');
 
cellRight.appendChild(txt);
 
var aa = document.createElement("a"); 
aa.setAttribute('href', '#'); 
var clickName = new Function("DeleteRow(this)"); 
aa.onclick = clickName; 
aa.innerHTML = " entfernen"; 
cellRight.appendChild(aa); 

}

Problem liegt bei cellRight.appendChild(txt). Da bekomme ich den Fehler "Typkonflikt". Wenn ich das auskommentiere, dann fügt er den Link "entfernen", der tiefer initialisiert wird, hinzu. Also scheint's wohl daran zu hapern. Was aber ist an dieser Zeile bitte falsch.

 

[Gilles]

Ich denke es wäre besser sich das input Element und das Div-Element selber zu erstellen mit document.createElement anstatt das komplett zu kopieren und abzuändern. Und ist die id eigentlich wichtig vom input? Auch der name könnte dann einfach equipment[] sein. Wenn die sachen abgeschickt werden hast du in deinen Formular Daten dann ein Array.
Zum Beispiel $_POST['equipment'] wäre dann ein numerisches Array.
Aber zurück zur JS geschichte. Würde einen Zähler hcohzählen lassen, falls es von nöten ist. Sonst könnten die texte sogar alle gleich aussehen, wenn du die id nicht zwingend brauchst.

 

[shadoan]

Hi Gilles,

also ich habe es jetzt so umgestellt, dass alle Elemente wie von Dir vorgeschlagen mit createElement erstellt werden. Das Zählen brauche ich zwar, aber das ist ja kein großes Ding. Der aktuelle Zähler ist in der Variable "Runde" gespeichert. Das onkeyup, welches mir meine Ajax-Funktion aufruft, habe ich folgendermaßen eingebaut:

el.setAttribute('onkeyup', 'search_inventory_objects(equipment_' + Runde + ',100998742');

Das scheint aber wohl falsch zu sein. Könntest Du mir da noch mal nen Tipp geben? Vielen Dank bis hier.

</SPAN>

 

[Gilles]

Hi Gilles,

also ich habe es jetzt so umgestellt, dass alle Elemente wie von Dir vorgeschlagen mit createElement erstellt werden. Das Zählen brauche ich zwar, aber das ist ja kein großes Ding. Der aktuelle Zähler ist in der Variable "Runde" gespeichert. Das onkeyup, welches mir meine Ajax-Funktion aufruft, habe ich folgendermaßen eingebaut:

el.setAttribute('onkeyup', 'search_inventory_objects(equipment_' + Runde + ',100998742');

Das scheint aber wohl falsch zu sein. Könntest Du mir da noch mal nen Tipp geben? Vielen Dank bis hier.

</SPAN>

Ich weiss nicht genau ob das mit setAttribute wirklich klappt. Und wenn ja musst du schon beide klammern wieder schliessen :) (eine "Klammer zu" fehlt).
Ansonsten würde ich eher sowas probieren:

el.onkeyup = function() {
  search_inventory(('equipment_'+Runde),100998742); 
};

Dafür muss Runde auch eine globale variable sein. Mir ist auch aufgefallen. Schau dir an wo deine ' anfangen und aufhören. Hast du etwas kuddel muddel bei dir

 

[shadoan]

Hi Gilles,

danke wieder mal vielmals. Hat super geklappt. :)