因此,我需要向表的每一行添加一个新单元格,并在其中添加该行的索引值。我有一个循环,但是每次循环运行时,它都会不断增加额外的单元格。
我尝试更改循环和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”下的每一行的末尾添加一个单元格,但是每次迭代都会在它之前的每一行上添加一个额外的单元格。