✔ Per Klick zusätzliches Feld erscheinen lassen

ava99

ava99

Erfahrenes Mitglied
Hallo Community !

habe eine kleine tabelle mir angelegt und möchte diese bei Klick auf ein Plus(als anklickbare Grafik) um eine Zeile erweitern, ohne dass die Daten aus den anderen Zeilen und spalten verloren gehen.

Code: 
<table>
<tr>
<td ><input name="h_bild" type="checkbox" value="h_bild"></td> 
<td ><a href="javascript:AddRow();" >Plus...   anklickbares pluszeichen</a></td>
</tr>
</table>

Dachte da an js. Aber irgendwie will das nicht ganz klappen
Code: 
function AddRow()
{
    var tabelle = document.getElementById('deineTabelle');
    var spalte = document.createElement('table');
    var reihe = document.createElement('td');
    var inputfeld = document.createElement('input');

    inputfeld.type = "checkbox";
    //kA.. hier noch weiter eEigenschaften

    reihe.appendChild(inputfeld);
    spalte.appendChild(reihe);
    tabelle.appendChild(spalte);
}

Vielen Dank schon im Voraus für eure Hilfe!

Grüße Ava99
 
Moin...



Code: 
function AddRow()
{
    var tabelle = document.getElementById('deineTabelle');
    var spalte = document.createElement('table');
    var reihe = document.createElement('td');
    var inputfeld = document.createElement('input');

    inputfeld.type = "checkbox";
    //kA.. hier noch weiter eEigenschaften

    reihe.appendChild(inputfeld);
    spalte.appendChild(reihe);
    tabelle.appendChild(spalte);
}

Ich gehe mal dovon aus, du hast irgendwo eine Tabelle mit der ID "deineTabelle".

Auffällig ist folgendes:
Code: 
var spalte = document.createElement('table');
    var reihe = document.createElement('td');
    var inputfeld = document.createElement('input');
du erzeugst nirgends ein tr-Element, dafür aber eine Tabelle, welche du dann direkt in #deineTabelle einhängst.
 
Ok danke für den Hinweis, habe es hinzugefügt, aber leider geht es immer noch nicht

Code: 
<script language="JavaScript">
	function AddRow()
{
    var tabelle = document.getElementById('deineTabelle');
    var spalte = document.createElement('table');
    var reihe = document.createElement('tr');
	var reihe = document.createElement('td');
    var inputfeld = document.createElement('input');

    inputfeld.type = checkbox;
    //kA.. hier noch weiter eEigenschaften

    reihe.appendChild(inputfeld);
    spalte.appendChild(reihe);
    tabelle.appendChild(spalte);
}

</script>
</head>
 
Da geht immer noch nen bisserl quer...die neue Tabelle brauchst du nicht, du willst ja ein tr in die Tabelle einfügen:
Code: 
function AddRow()
{
    var tabelle = (document.getElementById('deineTabelle').getElementsByTagName('tbody').length>0)
                    ? document.getElementById('deineTabelle').getElementsByTagName('tbody')[0]
                    : document.getElementById('deineTabelle');
    
    var reihe = document.createElement('tr');
	  var zelle = document.createElement('td');
    var inputfeld = document.createElement('input');
    inputfeld.type = "checkbox";
    zelle.appendChild(inputfeld);
    reihe.appendChild(zelle);
    tabelle.appendChild(reihe);
}

Die erste Zeile habe ich abgeändert, weil je nach Browser Tabellen mit einer eigenen Struktur verarbeitet werden, sie werden automatisch mit einem Tabellenkörper(TBODY) versehen...in diesen muss dann die TR eingebettet werden.

Alternativ gibt es auch noch die Methoden insertRow() und insertCell(), der Umgang damit ist idR. unkomplizierter, und das TBODY-Problem besteht dort auch nicht ;)
Dasselbe würde mit diesen Methoden so laufen:
Code: 
function AddRow()
{
    var tabelle = document.getElementById('deineTabelle');
    reihe=tabelle.insertRow(tabelle.rows.length);
    zelle=reihe.insertCell(0);
    var inputfeld = document.createElement('input');
    inputfeld.type = "checkbox";
    zelle.appendChild(inputfeld);
    
}
 
danke für deine Hilfe!

Aber irgendwie möchte er diese Funktion AddRow() nicht aufrufen, ich verstehe nicht warum..es passiert leider immer noch nichts


Grüße Ava
 
Dann kann ich dir auch nicht weiterhelfen, bei mir geht es problemlos:
Code: 
<html>
<head>
<title>Test</title>
<script type="text/javascript">
<!--
function AddRow()
{
    var tabelle = document.getElementById('deineTabelle');
    reihe=tabelle.insertRow(tabelle.rows.length);
    zelle=reihe.insertCell(0);
    var inputfeld = document.createElement('input');
    inputfeld.type = "checkbox";
    zelle.appendChild(inputfeld);
    
}

//-->
</script>
</head>
<body>
<table id="deineTabelle">
<tr>
<td ><input name="h_bild" type="checkbox" value="h_bild"></td> 
<td ><a href="javascript:AddRow();" >Plus...   anklickbares pluszeichen</a></td>
</tr>
</table>
</body>
</html>
 
Hallo!

Vielen Dank!

jetzt geht es, weiß auch nicht warum es vorher nicht ging.

Grüße Ava
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück