Estoy buscando sugerencias sobre cómo abordar la visualización de un contenedor de almacenamiento y su contenido.
¿Debo usar una tabla html o una cuadrícula CSS para visualizar mi caja? ¿Una solución completamente diferente?
¿Cuál es la mejor manera de iterar a través de las celdas para agregar la imagen? Entre otras cosas, he intentado sin éxito iterar a través de una cuadrícula css a través de:
// numberOfItems comes from SQL query and is defined previously function generateItems() { for(i=0; i < numberOfItems; i++) { var addItemsHere = document.getElementById("id_" + i); var items = document.createElement("img"); items.src = "item.png"; addTubesHere.appendChild(items); } }Si no puede decir que soy muy nuevo en el tema y feliz de leer la documentación, pero espero obtener algunos consejos en la dirección correcta. ¡Gracias!
No parece que sus datos tengan la semántica de una tabla, pero suena como una cuadrícula.
Este fragmento usa Javascript para crear una cuadrícula de 9x9, colocando celdas como elementos div.
En lugar de agregar un elemento adicional (img), las imágenes en las primeras n celdas se configuran usando background-image en cell-divs. Puede cambiar esto para crear realmente otro elemento (un img) y establecer el src, pero por lo que está en la pregunta tal como está, esto no parece necesario.
//SET UP THE GRID const box = document.querySelector('.box'); const numberOfItems = 15; //set just for this demo for (let row = 0; row < 9; row++) { for (let col = 0; col < 9; col++) { let cell = document.createElement('div'); cell.classList.add('cell'); box.appendChild(cell); } } //NOW PUT THE IMAGES INTO THE FIRST N CELLS const cells = box.querySelectorAll('.cell'); for (let i = 0; i < numberOfItems; i++) { cells[i].style.setProperty('--bg', 'url(https://picsum.photos/id/1015/200/200)'); } .box { width: 100vmin; height: 100vmin; display: grid; grid-template-columns: repeat(9, 1fr); grid-template-rows: repeat(9, 1fr); gap: 1vmin; } .box>* { border: 0.1vmin solid; background-image: var(--bg); background-size: cover; background-position center center; } <div class="box"></div>Puedes usar la repetición de fondo, así:
<style> div { background-image: url("https://www.i2clipart.com/cliparts/7/5/7/8/clipart-rick-astley-64x64-7578.png"); background-size: 64px 64px; width: 64px; height: 64px; } </style> <div id="ricks"></div> <script> let ricks = document.getElementById('ricks'); ricks.style.width = (4 * 64) + 'px'; ricks.style.height = (3 * 64) + 'px'; </script>