I'm trying to do a basic exercise with JavaScript. The goal of the exercise is to input some values and then show them into a table.
The problem I have is is that when I enter first name as " a
", last name as " a
" and phone as " 6
", I get " aa6
", instead of " aa 6
". What can I do to fix that?
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>
You had a problem, because when you create each td
, it didn´t create. It created all inside a tr
Try it, it looks better.
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>';
}
}
The document.createElement("td").appendChild(document.createTextNode(persons[i].firstName))
line returns a text node and not an element. So your appending only the text everytime you try to append the table cells to the row. Also, the new <tr>
is being appended outside of the <tbody>
tag.
Instead you could use the insertRow
method on the <table>
element and the insertCell
on the <tr>
element to create new rows and cells.
Loop through each of your persons, like you already do. Then inside each loop, loop through the person
object with a for...in
loop. A for...of
might be better, but you seem to use old practices, so I'll just stick with it.
Then for each property in the person
object, create a new cell and use the textContent
setter to set the value of the current property to the cell.
I understand that this might be a little daunting at first, so don't hesitate to ask questions about it.
Keep on learning, you are doing great!
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>
Just break these lines:
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)));
-- to separate parts, since these commands don't return a 'td' element, but return a text node (you can check on your browsers inspector)
So, your final code will be:
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);
}
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.