我正在尝试使用 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 回答
牛魔王的故事
TA贡献1830条经验 获得超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
TA贡献2036条经验 获得超8个赞
只需打破这些行：
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
TA贡献1820条经验 获得超2个赞
你遇到了一个问题，因为当你创建每个 时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>';
}
}
- 3 回答
- 0 关注
- 117 浏览
添加回答
举报
0/150
提交
取消