首頁猿問如何使用 JavaScript...

如何使用 JavaScript 將多個(gè)輸入值添加到表中？

Html5

鴻蒙傳說 2023-09-04 16:06:57

我正在嘗試使用 JavaScript 進(jìn)行基本練習(xí)。本練習(xí)的目標(biāo)是輸入一些值，然后將它們顯示在表格中。我遇到的問題是，當(dāng)我輸入名字為“ a”、姓氏為“ a”、電話為“ 6”時(shí)，我得到的是“ aa6”，而不是“ a a 6”。我能做什么來解決這個(gè)問題？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貢獻(xiàn)1830條經(jīng)驗(yàn) 獲得超3個(gè)贊

該document.createElement("td").appendChild(document.createTextNode(persons[i].firstName))行返回一個(gè)文本節(jié)點(diǎn)而不是一個(gè)元素。因此，每次嘗試將表格單元格附加到行時(shí)，您僅附加文本。此外，新的內(nèi)容<tr>被附加到<tbody>標(biāo)簽之外。

相反，您可以使用元素insertRow上的方法<table>和元素insertCell上的<tr>方法來創(chuàng)建新行和單元格。

循環(huán)遍歷每個(gè)人，就像您已經(jīng)做的那樣。然后在每個(gè)循環(huán)內(nèi)部，用循環(huán)遍歷person對象for...in。Afor...of可能會更好，但你似乎使用了舊的做法，所以我就堅(jiān)持使用它。

然后，對于對象中的每個(gè)屬性person，創(chuàng)建一個(gè)新單元格并使用textContentsetter 將當(dāng)前屬性的值設(shè)置到該單元格。

我知道一開始這可能有點(diǎn)令人畏懼，所以請毫不猶豫地提出相關(guān)問題。

繼續(xù)學(xué)習(xí)，你做得很棒！

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]

}

<h2>add client into a table</h2>

<table>

<tr>

</tr>

</table>

<tr>

</tr>

</table>

</body>

反對回復(fù) 2023-09-04

慕桂英3389331

TA貢獻(xiàn)2036條經(jīng)驗(yàn) 獲得超8個(gè)贊

只需打破這些行：

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)));

-- 分隔各個(gè)部分，因?yàn)檫@些命令不返回“td”元素，而是返回文本節(jié)點(diǎn)（您可以檢查瀏覽器檢查器）

所以，你的最終代碼將是：

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);

}

反對回復(fù) 2023-09-04

DIEA

TA貢獻(xiàn)1820條經(jīng)驗(yàn) 獲得超3個(gè)贊

你遇到了一個(gè)問題，因?yàn)楫?dāng)你創(chuàng)建每個(gè) 時(shí)td，它并沒有創(chuàng)建。它在一個(gè)內(nèi)部創(chuàng)建了所有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>';

}

反對回復(fù) 2023-09-04