Tengo la siguiente tabla con las columnas que se muestran en el siguiente código (en jsp).
Quiero que esta misma tabla se haga en javascript, donde la lista en mi caso será una matriz de objetos json.
¿Me pueden ayudar con esto?
<table border="1" width="90%"> <tr> <th>Id</th> <th>Name</th> <th>Password</th> <th>Email</th> <th>Sex</th> <th>Country</th> <th>Edit</th> <th>Delete</th></tr> <c:forEach items="${list}" var="u"> <tr><td>${u.getId()}</td> <td>${u.getName()}</td> <td>${u.getPassword()}</td> <td>${u.getEmail()}</td> <td>${u.getSex()}</td> <td>${u.getCountry()}</td> <td><a href="editform.jsp?id=${u.getId()}">Edit</a></td> <td><a href="deleteuser.jsp?id=${u.getId()}">Delete</a></td></tr> </c:forEach> </table>Lo más simple que puedes intentar es algo así (si te entendí bien):
let table = document.getElementById("my-table"); let list = [{ "id":1, "name":"Jhon", "password":"doejhon@", "email":"jhondoe@doe.com", "sex":"male", "country":"USA" }, { "id":2, "name":"Lisa", "password":"w87e8c8787%", "email":"lisa@doe.com", "sex":"female", "country":"UK" }]; list.forEach(item=>{ let child = document.createElement("tr"); child.innerHTML = `<td>${item.id}</td><td>${item.name}</td><td>${item.password}</td><td>${item.email}</td><td>${item.sex}</td><td>${item.country}</td><td>-</td><td>-</td>`; table.appendChild(child); }) <table border="1" width="90%" id="my-table"> <tr> <th>Id</th> <th>Name</th> <th>Password</th> <th>Email</th> <th>Sex</th> <th>Country</th> <th>Edit</th> <th>Delete</th></tr> </table> <!-- <c:forEach items="${list}" var="u"> <tr><td>${u.getId()}</td> <td>${u.getName()}</td> <td>${u.getPassword()}</td> <td>${u.getEmail()}</td> <td>${u.getSex()}</td> <td>${u.getCountry()}</td> <td><a href="editform.jsp?id=${u.getId()}">Edit</a></td> <td><a href="deleteuser.jsp?id=${u.getId()}">Delete</a></td></tr> </c:forEach> -->Aquí hay un enfoque, demostrando con un conjunto más pequeño de campos.
No está del todo claro cuáles se supone que son los enlaces para Editar/Eliminar. Aquí lo dejamos como enlace a una JSP.
let table = document.createElement('TABLE'); let header = document.createElement('TR'); let fields = [ 'Id', 'Name', 'Password', 'Edit' ]; let cell; for (var i=0; i<fields.length; i++) { cell = document.createElement('TH'); cell.innerHTML = fields[i]; header.appendChild(cell); } table.appendChild(header); let data = [ { 'Id': 'someId', 'Name': 'some name', 'Password': 'some encrypted password', 'Edit': "<a href='editform.jsp?id=someId'>Edit</a>" }, { 'Id': 'anotherId', 'Name': 'some other name', 'Password': 'some other encrypted password', 'Edit': "<a href='editform.jsp?id=anotherId'>Edit</a>" } ]; let rowData; let fieldName; for (i=0 ; i<data.length ; i++) { let row = document.createElement('TR'); rowData = data[i]; for (var j=0; j<fields.length; j++) { fieldName = fields[j]; cell = document.createElement('TD'); cell.innerHTML = rowData[fieldName]; row.appendChild(cell); } table.appendChild(row); } let body = document.querySelector('BODY'); body.appendChild(table);