How can I make the serial number of the dynamic table row to be equal to the serial number of the object in the array?
Question
I am trying to create a table where each row will be an object in an array. Logically it works, but it gives me the number of rows in the table equal to the number of objects in the array each time I perform the function. Instead, I need the serial number of the row to be equal to the serial number of the object in the array. How can I achieve this? (* beginner's class project. can't use advanced js/libraries).
<html> <head> <style> table, th, td, tr { border: 1px solid black; } </style> </head> <body> <form> <input id="firstname" type="text" placeholder="firstname"></input><br> <input id="lastname" type="text" placeholder="lastname"></input><br> </form> <button onclick="myFunc()">calc</button> <div></div> </body> <script> let properties = [ 'firstname', 'lastname', ] let form = document.querySelector('form') let div = document.querySelector('div') let user = {} let users = [] function myFunc() { users.push(user) for (let prop of properties) { user[prop] = form.elements[prop].value } for (let user of users) { //HERE is my problem. do i need to create separate function to calculate nubers and another one to render the table? let tr = document.createElement('tr') for (let key in user) { let td = document.createElement('td') td.innerHTML = user[key] tr.appendChild(td) } let table = document.createElement('table') table.appendChild(tr) div.appendChild(table) form.reset() console.log(users.length) } } </script> </html>
1 answers
solution1
0 ACCPTED 2021-10-01 09:47:09
I'm not sure if I understood you correctly but I think you were pretty close. The thing is that, how it currently is, you never delete items from the object, you only add. So you don't have to render the whole table from the beginning therefore you don't need the for loop.
<html> <head> <style> table, th, td, tr { border: 1px solid black; } </style> </head> <body> <form> <input id="firstname" type="text" placeholder="firstname"></input><br> <input id="lastname" type="text" placeholder="lastname"></input><br> </form> <button onclick="myFunc()">calc</button> <div> </div> </body> <script> let properties = [ 'firstname', 'lastname', ] let form = document.querySelector('form') let div = document.querySelector('div') let user = {} let users = [] function myFunc() { users.push(user) for (let prop of properties) { user[prop] = form.elements[prop].value } let tr = document.createElement('tr') for (let key in user) { let td = document.createElement('td') td.innerHTML = user[key] tr.appendChild(td) } let table = document.querySelector("table") if (table === null) { table = document.createElement('table'); } table.appendChild(tr) div.appendChild(table) form.reset() console.log(users.length); } </script> </html>
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.