javascript - 如何使用 JavaScript 将多个输入值添加到表中？

Question

我正在尝试使用 JavaScript 进行基本练习。练习的目的是输入一些值，然后将它们显示在表格中。

我遇到的问题是，当我输入名字“a”、姓氏“a”和电话号码“6”，我得到“aa6”，而不是“a a 6”。我该怎么做才能解决这个问题？

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

您遇到了问题，因为当您创建每个 td 时，它并没有创建。它在 tr

中创建了所有内容

试试吧，看起来更好。

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