How to add multiple input values to a table with JavaScript?

Question

I'm trying to do a basic exercise with JavaScript. The goal of the exercise is to input some values and then show them into a table.

The problem I have is is that when I enter first name as "a", last name as "a" and phone as "6", I get "aa6", instead of "a a 6". What can I do to fix that?

class clsperson {
  constructor(firstName, lastName, celephone) {
    this.firstName = firstName;
    this.lastName = lastName;
    this.celephone = celephone;
  }
}
var persons = [];

function addClient() {
  var Person = new clsperson(document.getElementById("firstName").value,
    document.getElementById("lastName").value, document.getElementById("celephone").value);

  persons.push(Person);
  document.getElementById("firstName").value = "";
  document.getElementById("lastName").value = "";
  document.getElementById("celephone").value = "";
}

function viewClients() {
  var tblClient = document.getElementById("tblClient");
  for (var i = 0; i < persons.length; i++) {
    var tr = document.createElement("tr");
    tblClient.appendChild(tr);
    tr.appendChild(document.createElement("td").appendChild(document.createTextNode(persons[i].firstName)));
    tr.appendChild(document.createElement("td").appendChild(document.createTextNode(persons[i].lastName)));
    tr.appendChild(document.createElement("td").appendChild(document.createTextNode(persons[i].celephone)));

  }
}

<h2>add client into a table</h2>
<table>
  <tr>
    <td><input id="firstName" type="text" /></td>
    <td><input id="lastName" type="text" /></td>
    <td><input id="celephone" type="text" /></td>
    <td><input id="addClient" type="button" value="add" onclick="addClient()" /></td>
    <td><input id="viewClient" type="button" value="show" onclick="viewClients()" /></td>
  </tr>
</table>
<table id="tblClient">
  <tr>
    <th><input type="text" value="first name" /></th>
    <th><input type="text" value="last name" /></th>
    <th><input type="text" value="celephone" /></th>
  </tr>
</table>

Answer 1

Just break these lines:

tr.appendChild(document.createElement("td").appendChild(document.createTextNode(persons[i].firstname))); 

tr.appendChild(document.createElement("td").appendChild(document.createTextNode(persons[i].lastName)));

tr.appendChild(document.createElement("td").appendChild(document.createTextNode(persons[i].celephone)));   

-- to separate parts, since these commands don't return a 'td' element, but return a text node (you can check on your browsers inspector)

So, your final code will be:

function viewClients() {
    var tblClient = document.getElementById("tblClient");
    for (var i = 0; i < persons.length; i++) {
      var tr = document.createElement("tr");
      tblClient.appendChild(tr);

      var td1 = document.createElement("td");
      td1.appendChild(document.createTextNode(persons[i].firstName));
      tr.appendChild(td1);

      var td2 = document.createElement("td");
      td2.appendChild(document.createTextNode(persons[i].lastName));
      tr.appendChild(td2);

      var td3 = document.createElement("td");
      td3.appendChild(document.createTextNode(persons[i].celephone));
      tr.appendChild(td3);
    }
  }

Answer 2

The document.createElement("td").appendChild(document.createTextNode(persons[i].firstName)) line returns a text node and not an element. So your appending only the text everytime you try to append the table cells to the row. Also, the new <tr> is being appended outside of the <tbody> tag.

Instead you could use the insertRow method on the <table> element and the insertCell on the <tr> element to create new rows and cells.

Loop through each of your persons, like you already do. Then inside each loop, loop through the person object with a for...in loop. A for...of might be better, but you seem to use old practices, so I'll just stick with it.

Then for each property in the person object, create a new cell and use the textContent setter to set the value of the current property to the cell.

I understand that this might be a little daunting at first, so don't hesitate to ask questions about it.

Keep on learning, you are doing great!

class clsperson {
  constructor(firstName, lastName, celephone) {
    this.firstName = firstName;
    this.lastName = lastName;
    this.celephone = celephone;
  }
}
var persons = [];

function addClient() {
  var Person = new clsperson(document.getElementById("firstName").value,
    document.getElementById("lastName").value, document.getElementById("celephone").value);

  persons.push(Person);
  document.getElementById("firstName").value = "";
  document.getElementById("lastName").value = "";
  document.getElementById("celephone").value = "";
}

function viewClients() {
  var tblClient = document.getElementById('tblClient');
  for (var i = 0; i < persons.length; i++) {
  
    var person = persons[i];
    var row = tblClient.insertRow();

    for (var key in person) {
      if (person.hasOwnProperty(key)) {
        var cell = row.insertCell();
        cell.textContent = person[key]
      }
    }

  }
}

<body dir="rtl">
  <h2>add client into a table</h2>
  <table>
    <tr>
      <td><input id="firstName" type="text" /></td>
      <td><input id="lastName" type="text" /></td>
      <td><input id="celephone" type="text" /></td>
      <td><input id="addClient" type="button" value="add" onclick="addClient()" /></td>
      <td><input id="viewClient" type="button" value="show" onclick="viewClients()" /></td>


    </tr>
  </table>
  <table id="tblClient">
    <tr>
      <th><input type="text" value="first name" /></th>
      <th><input type="text" value="last name" /></th>
      <th><input type="text" value="celephone" /></th>
    </tr>
  </table>
</body>

Answer 3

You had a problem, because when you create each td, it didn´t create. It created all inside a tr

Try it, it looks better.

               function viewClients() {
                    for (var i = 0; i < persons.length; i++) {
                        document.getElementById("tblClient").insertRow(-1).innerHTML = '<tr><td>' + persons[i].firstName + '</td>' + '<td>' + persons[i].lastName + '</td>' + '<td>' + persons[i].celephone + '</td></tr>';
                    }
                }