如何使用JavaScript向表中添加多个输入值？

我正在尝试用JavaScript做一个基本的练习。本练习的目标是输入一些值，然后将它们显示到表中

我遇到的问题是，当我将名字输入为“

a

”、姓氏输入为“

a

”、电话输入为“

6

”时，我得到的是“

aa6

”，而不是“

a6

”。 我能做些什么来解决这个问题

class-clsperson{
构造函数（名字、姓氏、celephone）{
this.firstName=firstName；
this.lastName=lastName；
this.celephone=celephone；
}
}
var人员=[]；
函数addClient（）{
var Person=new clsperson（document.getElementById（“firstName”）.value，
document.getElementById（“lastName”）.value，document.getElementById（“celephone”）.value）；
推（人）；
document.getElementById（“firstName”）.value=“”；
document.getElementById（“lastName”）.value=“”；
document.getElementById（“celephone”）.value=“”；
}
函数viewClients（）{
var tblClient=document.getElementById（“tblClient”）；
对于（变量i=0；i

将客户端添加到表中

您遇到了一个问题，因为当您创建每个

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

函数viewClients（）{
对于（变量i=0；i

document.createElement（“td”）.appendChild（document.createTextNode（persons[i].firstName））行返回文本节点，而不是元素。因此，每次尝试将表格单元格追加到行时，您都只追加文本。此外，新的

将附加在

标记之外

相反，您可以使用

元素上的

insertRow

方法和

元素上的

insertCell

来创建新行和单元格

像你已经做的那样，在你的每个人身上循环。然后在每个循环中，使用

for…in

循环通过

person

对象。一个for…of可能更好，但您似乎使用了旧的做法，所以我会坚持下去

然后，为

person

对象中的每个属性创建一个新单元格，并使用

textContent

setter将当前属性的值设置为该单元格

我知道一开始这可能有点让人畏缩，所以请毫不犹豫地提出问题

继续学习，你做得很好

class-clsperson{
构造函数（名字、姓氏、celephone）{
this.firstName=firstName；
this.lastName=lastName；
this.celephone=celephone；
}
}
var人员=[]；
函数addClient（）{
var Person=new clsperson（document.getElementById（“firstName”）.value，
document.getElementById（“lastName”）.value，document.getElementById（“celephone”）.value）；
推（人）；
document.getElementById（“firstName”）.value=“”；
document.getElementById（“lastName”）.value=“”；
document.getElementById（“celephone”）.value=“”；
}
函数viewClients（）{
var tblClient=document.getElementById（'tblClient'）；
对于（变量i=0；i

将客户端添加到表中

只需打断以下几行：

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)));   

--因为这些命令不返回'td'元素，而是返回一个文本节点（您可以在浏览器检查器上检查）

因此，您的最终代码将是：

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

函数viewClients（）{
var tblClient=document.getElementById（“tblClient”）；
对于（变量i=0；i

返回附加的子项。因此，您将文本节点添加到

tr

。非常感谢，我刚刚开始在类中学习JS，因为它是一种函数式语言，所以非常混乱