Estoy tratando de crear una tabla donde cada fila será un objeto en una matriz. Lógicamente funciona, pero me da la cantidad de filas en la tabla igual a la cantidad de objetos en la matriz cada vez que realizo la función. En cambio, necesito que el número de serie de la fila sea igual al número de serie del objeto en la matriz. ¿Cómo puedo conseguir esto? (* proyecto de clase para principiantes. No se pueden usar js/bibliotecas avanzadas).
<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>No estoy seguro de haberte entendido bien, pero creo que estabas bastante cerca. Lo que pasa es que, como está actualmente, nunca eliminas elementos del objeto, solo agregas. Por lo tanto, no tiene que representar toda la tabla desde el principio, por lo tanto, no necesita el bucle for.
<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>