Блог

Главная - Вопросы по программированию - Как динамически добавить число с помощью Javascript в первую ячейку

Как динамически добавить число с помощью Javascript в первую ячейку

#javascript #html-table #row

#javascript #html-таблица #строка

Вопрос:

Я изучаю Javascript и на данный момент застрял. Когда пользователь вводит свое имя, фамилию, возраст и нажимает на кнопку «Добавить», в таблицу добавляется 1 новая строка и 4 новые ячейки со значением, введенным пользователем.

Мой вопрос: как мне сделать так, чтобы первая ячейка была числом? Которое в данном случае должно быть номером 4. Если пользователь добавит еще одну строку со значением, она должна стать номером 5. и т.д.

Если бы кто-нибудь мог указать мне направление или показать мне другой способ сделать это, это помогло бы. Спасибо! (css добавлен только для визуальных эффектов)

 function allID(id) {
    return document.getElementById(id);
}

function allEvents() {
    allID("voegdatatoe").onclick = function () {
            voegToeGegevens();
    };
}

allEvents();

function voegToeGegevens() {
    var formulier = allID("invoerformulier");
    var nieuweGegevens = [];
    for (var i = 0; i < formulier.length; i  ) {
        nieuweGegevens[i] = formulier.elements[i].value;
    }

    var uitvoertabel = allID("uitvoertabel");
    var nieuweRij = uitvoertabel.insertRow(-1);
    for (i = 0; i < 4; i  ) {
        var NieuweCell = nieuweRij.insertCell(i);
        NieuweCell.innerHTML = nieuweGegevens[i];
    }
}

var row = document.getElementsByClassName("rownmr");
var i = 0;

for (i = 0; i < row.length; i  ) {
    row[i].innerHTML = i   1;
}  
 table,
th,
td {
	border-collapse: collapse;
	border: 1px solid black;
}

th,
td {
	padding: 5px;
}

th {
	text-align: left;
	background-color: #c95050;
	color: white;
}

.uitvoertabel {
	width: 60%;
}

.uitvoertabel tr:nth-child(even) {
	background-color: #eee;
}

.uitvoertabel tbody tr td:first-child {
	width: 30px;
}

.invoerform {
	margin-top: 50px;
	width: 30%;
}

.invoerform input,
label {
	display: block;
}

.invoerform label {
	margin-bottom: 5px;
	margin-top: 10px;
}

#voegdatatoe {
	margin-top: 30px;
}

input:focus {
	border: 1px solid #d45757;
	outline: none;
}  
 <table class="uitvoertabel" id="uitvoertabel">
   <thead>
      <tr>
         <th></th>
         <th>Voornaam</th>
         <th>Achternaam</th>
         <th>Leeftijd</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td class="rownmr"></td>
         <td>Johan</td>
         <td>cruijff</td>
         <td>54</td>
      </tr>
      <tr>
         <td class="rownmr"></td>
         <td>Frans</td>
         <td>Bauer</td>
         <td>47</td>
      </tr>
      <tr>
         <td class="rownmr"></td>
         <td>Willem</td>
         <td>van Oranje</td>
         <td>80</td>
      </tr>
   </tbody>
</table>
<form action="" id="invoerformulier" class="invoerform">
   <label>Voornaam:</label>
   <input type="text" name="vnaam" id="voornaam">
   <label>Achternaam:</label>
   <input type="text" name="anaam" id="achternaam">
   <label>Leeftijd:</label>
   <input type="text" name="points" id="leeftijd">
</form>
<button id="voegdatatoe">Voeg toe</button>

Ответ №1:

Существует несколько способов хранения этой информации, от глобальной переменной (не рекомендуется) до некоторого локального замыкания или даже localStorage. Но у вас есть информация в DOM, поэтому, возможно, будет проще всего использовать ее.

Одним из способов сделать это было бы просканировать идентификаторы, найти их максимальное значение и добавить к нему единицу. Это включает в себя несколько изменений в вашем коде. Во-первых, мы бы добавили некоторый код для сканирования ваших ячеек id на предмет наибольшего значения:

         var rows = document.getElementsByClassName("rownmr");
        var highestId = Math.max(...([...rows].map(row => Number(row.textContent))))

Затем мы запустили бы ваш массив содержимого с новым значением, на единицу превышающим это максимальное:

         var nieuweGegevens = [highestId   1];

И ваш цикл должен учитывать это, добавляя единицу в индекс

         for (var i = 0; i < formulier.length; i  ) {
            nieuweGegevens[i   1] = formulier.elements[i].value;
        }

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

         for (i = 0; i < 4; i  ) {
            var NieuweCell = nieuweRij.insertCell(i);
            NieuweCell.innerHTML = nieuweGegevens[i];
            if (i === 0) {                         /**** new ****/
                NieuweCell.classList.add("rownmr") /**** new ****/
            }                                      /**** new ****/ 
        }

Вы можете увидеть эти изменения в этом фрагменте:

 function allID(id) {
    return document.getElementById(id);
}

function allEvents() {
    allID("voegdatatoe").onclick = function () {
            voegToeGegevens();
    };
}

allEvents();

function voegToeGegevens() {
    var formulier = allID("invoerformulier");
    var rows = document.getElementsByClassName("rownmr");
    var highestId = Math.max(...([...rows].map(row => Number(row.textContent))))
    var nieuweGegevens = [highestId   1];
    for (var i = 0; i < formulier.length; i  ) {
        nieuweGegevens[i   1] = formulier.elements[i].value;
    }

    var uitvoertabel = allID("uitvoertabel");
    var nieuweRij = uitvoertabel.insertRow(-1);
    for (i = 0; i < 4; i  ) {
        var NieuweCell = nieuweRij.insertCell(i);
        NieuweCell.innerHTML = nieuweGegevens[i];
        if (i === 0) {
            NieuweCell.classList.add("rownmr")
        }
    }
}

var row = document.getElementsByClassName("rownmr");
var i = 0;

for (i = 0; i < row.length; i  ) {
    row[i].innerHTML = i   1;
}  
 table,
th,
td {
	border-collapse: collapse;
	border: 1px solid black;
}

th,
td {
	padding: 5px;
}

th {
	text-align: left;
	background-color: #c95050;
	color: white;
}

.uitvoertabel {
	width: 60%;
}

.uitvoertabel tr:nth-child(even) {
	background-color: #eee;
}

.uitvoertabel tbody tr td:first-child {
	width: 30px;
}

.invoerform {
	margin-top: 50px;
	width: 30%;
}

.invoerform input,
label {
	display: block;
}

.invoerform label {
	margin-bottom: 5px;
	margin-top: 10px;
}

#voegdatatoe {
	margin-top: 30px;
}

input:focus {
	border: 1px solid #d45757;
	outline: none;
}  
 <table class="uitvoertabel" id="uitvoertabel">
   <thead>
      <tr>
         <th></th>
         <th>Voornaam</th>
         <th>Achternaam</th>
         <th>Leeftijd</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td class="rownmr"></td>
         <td>Johan</td>
         <td>cruijff</td>
         <td>54</td>
      </tr>
      <tr>
         <td class="rownmr"></td>
         <td>Frans</td>
         <td>Bauer</td>
         <td>47</td>
      </tr>
      <tr>
         <td class="rownmr"></td>
         <td>Willem</td>
         <td>van Oranje</td>
         <td>80</td>
      </tr>
   </tbody>
</table>
<form action="" id="invoerformulier" class="invoerform">
   <label>Voornaam:</label>
   <input type="text" name="vnaam" id="voornaam">
   <label>Achternaam:</label>
   <input type="text" name="anaam" id="achternaam">
   <label>Leeftijd:</label>
   <input type="text" name="points" id="leeftijd">
</form>
<button id="voegdatatoe">Voeg toe</button>

Обратите внимание, что это будет продолжать работать при последующих добавлениях.

Ответ №2:

Добавьте дополнительный параметр length 1 в массивы данных

 function allID(id) {
    return document.getElementById(id);
}

function allEvents() {
    allID("voegdatatoe").onclick = function () {
            voegToeGegevens();
    };
}

allEvents();

function voegToeGegevens() {
var row = document.getElementsByTagName("tr");
    var formulier = allID("invoerformulier");
    var nieuweGegevens = [];
    nieuweGegevens.push(row.length) //length param for first column
    for (var i = 0; i < formulier.length; i  ) {
        nieuweGegevens[i 1] = formulier.elements[i].value; //saving values from i=1

    }

    var uitvoertabel = allID("uitvoertabel");
    var nieuweRij = uitvoertabel.insertRow(-1);
    for (i = 0; i < 4; i  ) {
        var NieuweCell = nieuweRij.insertCell(i);
        NieuweCell.innerHTML = nieuweGegevens[i];
    }
}

var row = document.getElementsByClassName("rownmr");
var i = 0;

for (i = 0; i < row.length; i  ) {
    row[i].innerHTML = i   1;
}  
 table,
th,
td {
	border-collapse: collapse;
	border: 1px solid black;
}

th,
td {
	padding: 5px;
}

th {
	text-align: left;
	background-color: #c95050;
	color: white;
}

.uitvoertabel {
	width: 60%;
}

.uitvoertabel tr:nth-child(even) {
	background-color: #eee;
}

.uitvoertabel tbody tr td:first-child {
	width: 30px;
}

.invoerform {
	margin-top: 50px;
	width: 30%;
}

.invoerform input,
label {
	display: block;
}

.invoerform label {
	margin-bottom: 5px;
	margin-top: 10px;
}

#voegdatatoe {
	margin-top: 30px;
}

input:focus {
	border: 1px solid #d45757;
	outline: none;
}  
 <table class="uitvoertabel" id="uitvoertabel">
   <thead>
      <tr>
         <th></th>
         <th>Voornaam</th>
         <th>Achternaam</th>
         <th>Leeftijd</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td class="rownmr"></td>
         <td>Johan</td>
         <td>cruijff</td>
         <td>54</td>
      </tr>
      <tr>
         <td class="rownmr"></td>
         <td>Frans</td>
         <td>Bauer</td>
         <td>47</td>
      </tr>
      <tr>
         <td class="rownmr"></td>
         <td>Willem</td>
         <td>van Oranje</td>
         <td>80</td>
      </tr>
   </tbody>
</table>
<form action="" id="invoerformulier" class="invoerform">
   <label>Voornaam:</label>
   <input type="text" name="vnaam" id="voornaam">
   <label>Achternaam:</label>
   <input type="text" name="anaam" id="achternaam">
   <label>Leeftijd:</label>
   <input type="text" name="points" id="leeftijd">
</form>
<button id="voegdatatoe">Voeg toe</button>

Комментарии:

1. Обратите внимание на существенную проблему с этим: когда вы добавляете вторую новую запись, она также получает значение 4 .

Ответ №3:

Поскольку я отмечаю, что ни один из сделанных ответов, похоже, не получил одобрения Niekket (никакой проверки ни для кого),
и что заданный вопрос сопровождается очень грубым примером (автор признает, что был заблокирован в период своего ученичества), используя много бесполезного кода…

Итак, я предлагаю это полное решение, которое, я надеюсь, достаточно информативно в отношении правильного способа кодирования своей проблемы (имхо).

 const
  TableBody_uitvoertabel = document.querySelector('#uitvoertabel > tbody'),
  form_invoerformulier   = document.querySelector('#invoerformulier'),
  in_voornaam     = document.querySelector('#voornaam'),
  in_achternaam   = document.querySelector('#achternaam'),
  in_leeftijd     = document.querySelector('#leeftijd')
  ;

var
  RowCount = 0; // global..

// place numbers in the first column
document.querySelectorAll('#uitvoertabel > tbody > tr td:first-child').forEach(
  elmTR=>{ elmTR.textContent =   RowCount }
);

form_invoerformulier.onsubmit = function(e) {
  e.preventDefault();

  let
    column = 0,
    row    = TableBody_uitvoertabel.insertRow(-1)
    ;
  row.insertCell(column  ).textContent =   RowCount;
  row.insertCell(column  ).textContent = in_voornaam.value;
  row.insertCell(column  ).textContent = in_achternaam.value;
  row.insertCell(column  ).textContent = in_leeftijd.value;

  this.reset();
}   
 table, th, td {
	border-collapse: collapse;
	border: 1px solid black;
}

th, td { padding: 5px; }
th {
	text-align: left;
	background-color: #c95050;
	color: white;
}

table.uitvoertabel { width: 60%; }

table.uitvoertabel tr:nth-child(even) {
	background-color: #eee;
}

table.uitvoertabel tbody tr td:first-child {
	width: 30px;
}

form.invoerform {
	margin-top: 50px;
	width: 30%;
}

form.invoerform input,
form.invoerform label {
	display: block;
}

form.invoerform label {
	margin-bottom: 5px;
	margin-top: 10px;
}

form.invoerform button {
	margin-top: 30px;
}

form.invoerform  input:focus {
	border-color:  #d45757;
	outline: none;
}  
 <table class="uitvoertabel" id="uitvoertabel">
  <thead>
      <tr>
        <th></th><th>Voornaam</th><th>Achternaam</th><th>Leeftijd</th>
      </tr>
  </thead>
  <tbody>
      <tr>
        <td></td><td>Johan</td><td>cruijff</td><td>54</td>
      </tr>
      <tr>
        <td></td><td>Frans</td><td>Bauer</td><td>47</td>
      </tr>
      <tr>
        <td></td><td>Willem</td><td>van Oranje</td><td>80</td>
      </tr>
  </tbody>
</table>

<form id="invoerformulier" class="invoerform">
  <label>Voornaam:</label>
  <input type="text" name="vnaam" id="voornaam">
  <label>Achternaam:</label>
  <input type="text" name="anaam" id="achternaam">
  <label>Leeftijd:</label>
  <input type="text" name="points" id="leeftijd">

  <button type="submit">Voeg toe</button>
  <button type="reset">Reset</button>
</form>

Комментарии:

1. Извините! Я не смог проверить ответы сразу, но поддержал ответ Скотта Сауета, когда увидел его ответ!

Ответ №4:

Я думаю, что основная проблема заключается в том, что вы устанавливаете rownmrs вручную только в первый раз из строки var row = document.getElementsByClassName("rownmr");
 , а не каждый раз, когда нажимаете на кнопку «Voeg toe».

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

HTML

 <table class="uitvoertabel" id="uitvoertabel">
   <thead>
      <tr>
         <th></th>
         <th>Voornaam</th>
         <th>Achternaam</th>
         <th>Leeftijd</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td class="rownmr">1</td>
         <td>Johan</td>
         <td>cruijff</td>
         <td>54</td>
      </tr>
      <tr>
         <td class="rownmr">2</td>
         <td>Frans</td>
         <td>Bauer</td>
         <td>47</td>
      </tr>
      <tr>
         <td class="rownmr">3</td>
         <td>Willem</td>
         <td>van Oranje</td>
         <td>80</td>
      </tr>
   </tbody>
</table>
<form action="" id="invoerformulier" class="invoerform">
   <label>Voornaam:</label>
   <input type="text" name="vnaam" id="voornaam">
   <label>Achternaam:</label>
   <input type="text" name="anaam" id="achternaam">
   <label>Leeftijd:</label>
   <input type="text" name="points" id="leeftijd">
</form>
<button id="voegdatatoe">Voeg toe</button>

js

 function allID(id) {
    return document.getElementById(id);
}

function allEvents() {
    allID("voegdatatoe").onclick = function () {
            voegToeGegevens();
    };
}

allEvents();

function voegToeGegevens() {
    var formulier = allID("invoerformulier");
    var nieuweGegevens = [];
    for (var i = 0; i < formulier.length; i  ) {
        nieuweGegevens[i] = formulier.elements[i].value;
    }

    var allRownmrs = document.getElementsByClassName('rownmr');

    var lastRownmr = allRownmrs[allRownmrs.length - 1].innerHTML;

    var nextRownmr = parseInt(lastRownmr)   1;

    var uitvoertabel = allID("uitvoertabel");
    var nieuweRij = uitvoertabel.insertRow(-1);
    for (i = 0; i < 4; i  ) {

      var NieuweCell = nieuweRij.insertCell(i)

        // you probably can refactor here
        if (i === 0) {
          NieuweCell.innerHTML = nextRownmr
        } else {
          NieuweCell.innerHTML = nieuweGegevens[i - 1];
        }        
    }
}