[英]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>
您遇到了问题,因为当您创建每个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>';
}
}
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>
只需打破这些行:
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);
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.