I am looking for hints on how to tackle the visualisation of a storage container and its content.
Should I use a html table or a CSS grid to visualize my box? An entirely different solution?
What is the best way to iterate through the cells to append the image? Amongst other things I have unsuccessfully tried to iterate through a css grid via:
// 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);
}
}If you couldn't tell I am very new to the topic and happy to read through documentation but I hope to get some pointers into the right direction. Thanks!
It doesn't sound as though your data has the semantics of a table but it does sound like a grid.
This snippet uses Javascript to create a 9x9 grid, putting cells in as div elements.
Rather than add a further (img) element the images in the first n cells are set by using background-image on the cell-divs. You could change this to actually create another element (an img) and set the src but from what is in the question as it stands this doesn't seem necessary.
//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>You can use background repeat, like this:
<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>