我正在嘗試使用 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 關注
- 223 瀏覽
添加回答
舉報
0/150
提交
取消