时间戳

首页 > 解决方案 > 如何使用 JavaScript 将多个输入值添加到表中？

javascript - 如何使用 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>

标签： javascripthtml

解决方案

该document.createElement("td").appendChild(document.createTextNode(persons[i].firstName))行返回一个文本节点而不是一个元素。因此，每次尝试将表格单元格附加到行时，您只附加文本。此外，新<tr>的被附加在<tbody>标签之外。

相反，您可以使用元素上的方法和元素insertRow上的方法来创建新的行和单元格。<table>insertCell<tr>

像你已经做的那样循环遍历你的每个人。然后在每个循环内，person用循环遍历对象for...in。Afor...of可能会更好，但您似乎使用旧的做法，所以我会坚持下去。

然后对于person对象中的每个属性，创建一个新单元格并使用textContentsetter 将当前属性的值设置为单元格。

我知道这起初可能有点令人生畏，所以不要犹豫，提出问题。

继续学习，你做得很好！

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>

推荐阅读