0
113
VistasUnirse a la matriz JS con la tabla HTML
Creé una tabla con HTML y necesito unirme a esa tabla con una matriz de JS:
var array = [ ["A4", "Audi", "2015", "1234"], ["A3", "Audi", "2011", "1542"], ["335i", "BMW", "2012", "9874"], ["440d", "BMW", "2015", "1975"], ["Civic", "Honda", "2002", "6574"], ] console.log(array) table = document.getElementById("myTable"); for (var i = 0; i < array.length; i++) { // create a new row var newRow = table.insertRow(table.length); for (var j = 0; j < array[i].length; j++) { // create a new cell var cell = newRow.insertCell(j); // add value to the cell cell.innerHTML = array[i][j]; } } <table id="myTable"> <caption id=a><b>Automobiliai</caption></b> <tr> <th>Modelis</th> <th>Gamintojas</th> <th>Metai</th> <th>Variklio Numeris</th> </tr> </table>Pero aparece el error en la consola: "TypeError no detectado: no se pueden leer las propiedades de nulo (leyendo 'insertRow')" ¿Qué está mal allí?
·
Juan Pablo Isaza
3 Respuestas
Responde la pregunta0
Puede hacer esto recorriendo la lista de países y creando una cadena HTML. Luego puede poner eso dentro del tbody usando un selector de clase o id. Aquí hay un ejemplo
var country = ["Norway", "Sweden", "Denmark"]; var capital = ["Oslo", "Stockholm" , "Copenhagen"] var bodyString = ''; $.each(country, function(index, ctry) { bodyString += ('<tr><td>'+ctry+'</td><td>'+capital[index]+'</td></tr>'); }); $('.countriesTable tbody').html(bodyString); <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <!DOCTYPE html> <html> <head> </head> <body> <table class="countriesTable"> <thead> <tr><th>Country</th><th>Capital</th> </thead> <tbody> </tbody> </table> </body> </html>
·
Juan Pablo Isaza
Denunciar
0
Parece que tu código funciona. Aquí hay un enfoque alternativo, usando Array.reduce para crear las filas e insertAdjacentHTML para agregar las filas.
document.querySelector(`#myTable`).insertAdjacentHTML( `beforeEnd`, [ ["A4", "Audi", "2015", "1234"], ["A3", "Audi", "2011", "1542"], ["335i", "BMW", "2012", "9874"], ["440d", "BMW", "2015", "1975"], ["Civic", "Honda", "2002", "6574"], ].reduce( (acc, [Modelis, Gamintojas, Metai, VariklioNumeris]) => `${acc}<tr><td>${Modelis}</td><td>${Gamintojas}</td><td>${ Metai}</td><td>${VariklioNumeris}</td></tr>`, ``) ); #myTable th:nth-child(n+3):nth-child(-n+4), #myTable td:nth-child(n+3):nth-child(-n+4) { text-align: center; } <table id="myTable"> <caption id=a><b>Automobiliai</caption></b> <tr> <th>Modelis</th> <th>Gamintojas</th> <th>Metai</th> <th>Variklio Numeris</th> </tr> </table>
·
Juan Pablo Isaza
Denunciar
0
<!DOCTYPE html> <html> <head> <title></title> </head> <body> <table id="myTable"> <caption id=a><b>Automobiliai</caption></b> <tr> <th>Modelis</th> <th>Gamintojas</th> <th>Metai</th> <th>Variklio Numeris</th> </tr> </table> <script type="text/javascript"> var array = [ ["A4", "Audi", "2015", "1234"], ["A3", "Audi", "2011", "1542"], ["335i", "BMW", "2012", "9874"], ["440d", "BMW", "2015", "1975"], ["Civic", "Honda", "2002", "6574"], ["A4", "Audi", "2015", "1234"], ["A3", "Audi", "2011", "1542"], ["335i", "BMW", "2012", "9874"], ["440d", "BMW", "2015", "1975"], ["Civic", "Honda", "2002", "6574"], ] console.log(array) table = document.getElementById("myTable"); for(var i = 0; i < array.length; i++) { // create a new row var newRow = table.insertRow(table.length); for(var j = 0; j < array[i].length; j++) { // create a new cell var cell = newRow.insertCell(j); // add value to the cell cell.innerHTML = array[i][j]; } } </script> </body> </html>Creo que encontré su problema, en realidad su secuencia de comandos se está cargando antes de los elementos en bucle
·
Juan Pablo Isaza
Denunciar
Responde la pregunta