Так что мне нужно добавить новую ячейку в каждую строку в моей таблице со значением индекса этой строки, у меня есть цикл, но он продолжает добавлять дополнительную ячейку каждый раз, когда цикл выполняется.
я попытался изменить цикл и insertcell (), но он продолжает добавлять ячейку.
//onderdeel 2, nieuwe table header voor rijnummers
var addTh = document.createElement("th");
var thText = document.createTextNode("Rij nummer");
addTh.appendChild(thText);
document.getElementById("uitvoertabel").rows[0].appendChild(addTh);
//Knop om een rij met gegevens toe te voegen
var button = document.getElementById("knop");
button.onclick = validate;
//Functie om te checken of gegevens kloppen
function validate() {
var form = document.getElementById("invoerForm");
if (form.vnaam.value == "") {
alert("Voer uw voornaam in!");
form.vnaam.focus();
return false;
}
if (form.anaam.value == "") {
alert("Voor uw achternaam in!");
form.anaam.focus();
return false;
}
if (isNaN(form.points.value) || form.points.value <= 0) {
alert("Voer het aantal punten in!");
form.points.focus();
return false;
}
voegtoe();
document.getElementById("voornaam").value = "";
document.getElementById("achternaam").value = "";
document.getElementById("punten").value = "";
}
//Functie om nieuwe rij gegevens aan de tabel toe te voegen
function voegtoe() {
var formulier = document.getElementById("invoerForm");
var nieuweGegevens = [];
for (var i = 0; i < formulier.length; i++) {
nieuweGegevens[i] = formulier.elements[i].value;
}
var uitvoertabel = document.getElementById("uitvoertabel");
var nieuweRij = uitvoertabel.insertRow();
for (var i = 0; i < 3; i++) {
var nieuweCell = nieuweRij.insertCell(i);
nieuweCell.innerHTML = nieuweGegevens[i];
}
addIndex();
}
//Functie om rijnummers toe te voegen
function addIndex() {
var table = document.getElementById("uitvoertabel");
for (var i = 1; i < table.rows.length; i++) {
var addIndex = table.rows[i].insertCell(-1);
addIndex.innerHTML = table.rows[i].rowIndex;
console.log(table.rows.length);
}
}
table,
td,
th {
border: 1px dotted;
border-collapse: collapse;
}
table {
width: 60%;
}
th,
td {
padding: 5px;
}
th {
text-align: left;
background-color: #ddd;
}
table tr:nth-child(even) {
background-color: #eee;
}
<table id="uitvoertabel">
<tr>
<th>Voornaam</th>
<th>Achternaam</th>
<th>Aantal punten</th>
</tr>
</table>
<br><br>
<form id="invoerForm" action="">
<table id="invoertabel">
<tr>
<td>Voornaam:</td>
<td><input type="text" name="vnaam" id="voornaam"></td>
</tr>
<tr>
<td>Achternaam:</td>
<td><input type="text" name="anaam" id="achternaam"></td>
</tr>
<tr>
<td>Aantal punten:</td>
<td><input type="text" name="points" id="punten"></td>
</tr>
</table>
<br>
</form>
<button id="knop">Voegtoe</button>
Я ожидал, что цикл просто добавит одну ячейку в конце каждой строки в разделе "rijnummers", но на каждой итерации он добавляет дополнительную ячейку нак каждому ряду, который предшествовал этому.