I am looking for hints on how to tackle the visualisation of a storage container and its content.

• The box has to have a fixed number of cells (9x9) which are permanently displayed
• I retrieve the count of items from a SQL database (currently via SUM(item_count) )
• Each item should be represented by a fixed image in a cell of the box, i.e. if the SQL query returns 15 items, the first 15 cells of my grid/table should each display my image

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);
   }  
 }

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

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!

CodePudding user response：

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>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

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>

jsfiddle example

CodePudding user response：

You could also use the handlebars.js library.