如何使用 JavaScript 向表中添加多個輸入值？
[英]How to add multiple input values to a table with JavaScript?
問題描述
我正在嘗試使用 JavaScript 進行基本練習。 練習的目標是輸入一些值，然后將它們顯示在表格中。
我遇到的問題是，當我輸入名字為“ a ”，姓氏為“ a ”，電話為“ 6 ”時，我得到的是“ aa6 ”，而不是“ aa 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 個解決方案
解決方案1
2 2020-03-10 21:47:09
您遇到了問題，因為當您創建每個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>';
}
}
解決方案2
2 2020-03-10 22:09:18
document.createElement("td").appendChild(document.createTextNode(persons[i].firstName))行返回一個文本節點而不是一個元素。 因此，每次嘗試將表格單元格附加到行時，您只附加文本。 此外，新的<tr>被附加在<tbody>標簽之外。
相反，您可以使用<table>元素上的insertRow方法和<tr>元素上的insertCell來創建新的行和單元格。
循環遍歷你的每個人，就像你已經做的那樣。 然后在每個循環中，使用for...in循環遍歷person對象。 for...of可能會更好，但你似乎使用舊的做法，所以我會堅持下去。
然后為person對象中的每個屬性創建一個新單元格並使用textContent setter 將當前屬性的值設置為單元格。
我知道一開始這可能有點令人生畏，所以不要猶豫，提出有關它的問題。
繼續學習，你做得很好！
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>
解決方案3
2 2020-03-10 22:41:15
只需打破這些行：
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);
}
}
如何獲取多個用戶文本輸入值，將它們與 javascript 相加並返回頁面上的值<p></p>
[英]How to take multiple user text input values, add them together with javascript and return the value on page in a <p>
使用javascript獲取多個字段的值並將其添加到表中
[英]Using javascript to get the values of multiple fields and add them to a table
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.