如何使用 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>
鸿蒙传说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 { 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> -
慕桂英3389331
只需打破这些行：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); } } -
DIEA
你遇到了一个问题，因为当你创建每个 时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>'; } }
随时随地看视频慕课网APP
相关分类
Html5