JSFiddle - React, Tailwind, and code Playground
HTML
<table id="seiten" width="100%" border="0">
<tr>
<td style="width:25px" width="25"><input value="true" type="checkbox" name="seiten[0][aktiv]"/ checked="checked"></td>
<td><input type="text" style="width: 98%" name="seiten[0][value]"/></td>
<td>
<img src="http://findicons.com/files/icons/1156/fugue/16/plus_button.png" onclick="addRow('seiten')">
<img src="http://findicons.com/files/icons/1156/fugue/16/minus_button.png" onclick="deleteRow('seiten', this)">
</td>
</tr>
</table>
JavaScript
function addRow(tableID) {
var table = document.getElementById(tableID); // definiert die Tabelle (anhand dessen namen) um die es hier geht.
var rowCount = table.rows.length; // 1 || 2 || 3 etc.
var row = table.insertRow(rowCount); // <tr>
var colCount = table.rows[0].cells.length; // zählt, wieviele Spalten die Zeile hat. z.b. 3
for(var i=0; i<colCount; i++) { // druchläuft die Spalten
var newcell = row.insertCell(i); // erzeugt 3 neue zeilen <td>. 3 = abhängig von colCount bzw. wieviele Zeilen die Tabelle ursprünglich hatte
newcell.innerHTML = table.rows[0].cells[i].innerHTML;
console.log(newcell.innerHTML);
//alert(newcell.childNodes);
switch(newcell.childNodes[0].type) {
case "img":
newcell.childNodes[0].onclick = "1";
case "text":
newcell.childNodes[0].value = "";
newcell.childNodes[0].name = tableID+"["+rowCount+"][value]";
break;
case "checkbox":
newcell.childNodes[0].value = "true";
newcell.childNodes[0].checked = true;
newcell.childNodes[0].name = tableID+"["+rowCount+"][aktiv]";
break;
case "select-one":
newcell.childNodes[0].selectedIndex = 0;
break;
}
}
}
function deleteRow(tableID, r) {
var i = r.parentNode.parentNode.rowIndex;
document.getElementById(tableID).deleteRow(i);
}