猿问

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

我正在尝试使用 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>


鸿蒙传说
浏览 180回答 3
3回答

牛魔王的故事

该document.createElement("td").appendChild(document.createTextNode(persons[i].firstName))行返回一个文本节点而不是一个元素。因此，每次尝试将表格单元格附加到行时，您仅附加文本。此外，新的内容<tr>被附加到<tbody>标签之外。相反，您可以使用元素insertRow上的方法<table>和元素insertCell上的<tr>方法来创建新行和单元格。循环遍历每个人，就像您已经做的那样。然后在每个循环内部，用循环遍历person对象for...in。Afor...of可能会更好，但你似乎使用了旧的做法，所以我就坚持使用它。然后，对于对象中的每个属性person，创建一个新单元格并使用textContentsetter 将当前属性的值设置到该单元格。我知道一开始这可能有点令人畏惧，所以请毫不犹豫地提出相关问题。继续学习，你做得很棒！class clsperson {&nbsp; constructor(firstName, lastName, celephone) {&nbsp; &nbsp; this.firstName = firstName;&nbsp; &nbsp; this.lastName = lastName;&nbsp; &nbsp; this.celephone = celephone;&nbsp; }}var persons = [];function addClient() {&nbsp; var Person = new clsperson(document.getElementById("firstName").value,&nbsp; &nbsp; document.getElementById("lastName").value, document.getElementById("celephone").value);&nbsp; persons.push(Person);&nbsp; document.getElementById("firstName").value = "";&nbsp; document.getElementById("lastName").value = "";&nbsp; document.getElementById("celephone").value = "";}function viewClients() {&nbsp; var tblClient = document.getElementById('tblClient');&nbsp; for (var i = 0; i < persons.length; i++) {&nbsp;&nbsp;&nbsp; &nbsp; var person = persons[i];&nbsp; &nbsp; var row = tblClient.insertRow();&nbsp; &nbsp; for (var key in person) {&nbsp; &nbsp; &nbsp; if (person.hasOwnProperty(key)) {&nbsp; &nbsp; &nbsp; &nbsp; var cell = row.insertCell();&nbsp; &nbsp; &nbsp; &nbsp; cell.textContent = person[key]&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }&nbsp; }}<body dir="rtl">&nbsp; <h2>add client into a table</h2>&nbsp; <table>&nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; <td><input id="firstName" type="text" /></td>&nbsp; &nbsp; &nbsp; <td><input id="lastName" type="text" /></td>&nbsp; &nbsp; &nbsp; <td><input id="celephone" type="text" /></td>&nbsp; &nbsp; &nbsp; <td><input id="addClient" type="button" value="add" onclick="addClient()" /></td>&nbsp; &nbsp; &nbsp; <td><input id="viewClient" type="button" value="show" onclick="viewClients()" /></td>&nbsp; &nbsp; </tr>&nbsp; </table>&nbsp; <table id="tblClient">&nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; <th><input type="text" value="first name" /></th>&nbsp; &nbsp; &nbsp; <th><input type="text" value="last name" /></th>&nbsp; &nbsp; &nbsp; <th><input type="text" value="celephone" /></th>&nbsp; &nbsp; </tr>&nbsp; </table></body>
0

慕桂英3389331

只需打破这些行：tr.appendChild(document.createElement("td").appendChild(document.createTextNode(persons[i].firstname)));&nbsp;tr.appendChild(document.createElement("td").appendChild(document.createTextNode(persons[i].lastName)));tr.appendChild(document.createElement("td").appendChild(document.createTextNode(persons[i].celephone)));&nbsp; &nbsp;-- 分隔各个部分，因为这些命令不返回“td”元素，而是返回文本节点（您可以检查浏览器检查器）所以，你的最终代码将是：function viewClients() {&nbsp; &nbsp; var tblClient = document.getElementById("tblClient");&nbsp; &nbsp; for (var i = 0; i < persons.length; i++) {&nbsp; &nbsp; &nbsp; var tr = document.createElement("tr");&nbsp; &nbsp; &nbsp; tblClient.appendChild(tr);&nbsp; &nbsp; &nbsp; var td1 = document.createElement("td");&nbsp; &nbsp; &nbsp; td1.appendChild(document.createTextNode(persons[i].firstName));&nbsp; &nbsp; &nbsp; tr.appendChild(td1);&nbsp; &nbsp; &nbsp; var td2 = document.createElement("td");&nbsp; &nbsp; &nbsp; td2.appendChild(document.createTextNode(persons[i].lastName));&nbsp; &nbsp; &nbsp; tr.appendChild(td2);&nbsp; &nbsp; &nbsp; var td3 = document.createElement("td");&nbsp; &nbsp; &nbsp; td3.appendChild(document.createTextNode(persons[i].celephone));&nbsp; &nbsp; &nbsp; tr.appendChild(td3);&nbsp; &nbsp; }&nbsp; }
0

DIEA

你遇到了一个问题，因为当你创建每个 时td，它并没有创建。它在一个内部创建了所有tr尝试一下，看起来更好。&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;function viewClients() {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; for (var i = 0; i < persons.length; i++) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; document.getElementById("tblClient").insertRow(-1).innerHTML = '<tr><td>' + persons[i].firstName + '</td>' + '<td>' + persons[i].lastName + '</td>' + '<td>' + persons[i].celephone + '</td></tr>';&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }
0
随时随地看视频慕课网APP

相关分类

Html5
我要回答