Почему цикл for создает дополнительную ячейку таблицы при каждой итерации? - PullRequest
0 голосов
/ 10 ноября 2019

Так что мне нужно добавить новую ячейку в каждую строку в моей таблице со значением индекса этой строки, у меня есть цикл, но он продолжает добавлять дополнительную ячейку каждый раз, когда цикл выполняется.

я попытался изменить цикл и 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", но на каждой итерации он добавляет дополнительную ячейку нак каждому ряду, который предшествовал этому.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...