How to add a number dynamically with Javascript to the first cell

Question

I'm learning Javascript and i'm stuck at the moment. When the user input their first name, last name, age and clicks on the button "add", 1 new row and 4 new cells are being added to the table with the value of the users input.

My question is: how do I get the first cell to be a number? Which in this case should be number 4. If the user adds another row with value it should become number 5. etc.

If somebody could point me in a direction or show me another way to do it, that would help. Thanks! (css added just for visuals)

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>

Scott Sauyet · Accepted Answer · 2019-03-28 17:09:42Z

There are a number of ways you could store this information, from a global variable (not recommended) to some local closure, or even localStorage. But you have the information in the DOM, so it might be simplest to use it.

One way to do this would be to scan the ids, find their maximum, and add one to it. This involves a few changes to your code. First, we would add some code to scan your id cells for the largest value:

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

Then we would start your content array with a new value one higher than that maximum:

        var nieuweGegevens = [highestId + 1];

And your loop needs to take this into account by adding one to the index

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

Finally, we need to add the right class to that new cell so that on the next call, it will continue to work:

        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 ****/ 
        }

You can see these changes inline in this snippet:

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>

Note that this will continue to work on subsequent adds.

Syed Mehtab Hassan · Accepted Answer · 2019-03-28 18:12:37Z

Add additional the length+1 param in the arrays of data

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>

Note a significant issue with this: when you add a second new entry, it also gets the value 4.

Mister Jojo · Accepted Answer · 2019-03-28 21:27:26Z

As I note that none of the answers made, does not seem to have the approval of Niekket (no validation for anybody),
and that the question asked is accompanied by a very rough example (the author admits to being bloked in his apprenticeship), using a lot of useless code...

So I propose this complete solution, which I hope is enlightening enough on the proper way of coding its problem ( imho ).

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>

Sorry! I couldn't test the answers right away, but upvoted the answer of Scott Sauyet when I saw his one!

Alex Mac · Accepted Answer · 2019-03-28 16:57:59Z

I think that the main issue is that you only manually set the rownmrs for the first time from line var row = document.getElementsByClassName("rownmr"); rather than every time you click on the "Voeg toe" button.

Ideally, for your hard coded numbers, they would be in the markup and the logic to grab the next rownmr to display and the adding of that cell happens on click.

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];
        }        
    }
}

Collectives™ on Stack Overflow

How to add a number dynamically with Javascript to the first cell

4 Answers 4

Comments

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related