如何创建 html 行和列

Question

如何只制作三行，每行三个元素，每个 from 数组都有坐标。到目前为止，我正在制作重复的行白衣元素

let container = document.querySelector('.container');
let arr = [{i: 0, j: 0}, {i: 0, j: 1}, {i: 0, j: 2}, {i: 1, j: 0}, {i: 1, j: 1}, {i: 1, j: 2}, {i: 2, j: 0}, {i: 2, j: 1}, {i: 2, j: 2}];
function drawHtml(){    
    arr.forEach(cell => {       
        container.innerHTML += `
            <div class="row row-${cell.i}">
                <div class="cell-row cell-${cell.j}">
                    <img src="https://via.placeholder.com/100" alt="">
                </div>
            </div>`
    }); 
}
drawHtml()

最终结果应该是这样的

    <div class="container">
            <div class="row row-0">
                <div class="cell-row cell-0">
                    <img src="https://via.placeholder.com/100" alt="">
                </div>
                <div class="cell-row cell-1">
                    <img src="https://via.placeholder.com/100" alt="">
                </div>
                ...
            </div>
            <div class="row row-1">
                <div class="cell-row cell-0">
                    <img src="https://via.placeholder.com/100" alt="">
                </div>
                <div class="cell-row cell-1">
                    <img src="https://via.placeholder.com/100" alt="">
                </div>
                ....
            </div>
            ....
            </div>
    </div>

Answer 1

您可以创建一个临时数组来存储 i 属性作为循环时的对象 ID：

let container = document.querySelector('.container');

let arr = [{i: 0, j: 0}, {i: 0, j: 1}, {i: 0, j: 2}, 
           {i: 1, j: 0}, {i: 1, j: 1}, {i: 1, j: 2}, 
           {i: 2, j: 0}, {i: 2, j: 1}, {i: 2, j: 2}];
           
function drawHtml(){    
    var temp = [];
    arr.forEach(cell => {
        if (temp.indexOf(cell.i) === -1) {
          temp.push(cell.i);
          
          container.innerHTML += `
            <div class="row row-${cell.i}">
                <div class="cell-row cell-${cell.j}">
                    <img src="https://via.placeholder.com/100" alt="">
                </div>
            </div>
          `;
        } else {
          container.querySelector(`.row-${cell.i}`).innerHTML += `
              <div class="cell-row cell-${cell.j}">
                  <img src="https://via.placeholder.com/100" alt="">
              </div>
          `;
        }
    }); 
}
drawHtml()

<div class="container"></div>

Answer 2

你能试试下面的代码吗

<div id="pContainer" class="container"></div>    
<script>

    let container = document.querySelector('.container');
    let arr = [{i: 0, j: 0}, {i: 0, j: 1}, {i: 0, j: 2}, {i: 1, j: 0}, {i: 1, j: 1}, {i: 1, j: 2}, {i: 2, j: 0}, {i: 2, j: 1}, {i: 2, j: 2}];
    function drawHtml(){    
    var innerHTML='';
    var i=0,tmp=0;
    innerHTML+='<div class="row row-0">';
    arr.forEach(cell => {       
        i = parseInt(cell.i);
        if(tmp != i)
            innerHTML+='</div><div class="row row-'+cell.i+'">';
        innerHTML+='<div class="cell-row cell-'+cell.j+'">';
        innerHTML+='<img src="https://via.placeholder.com/100" alt="">';
        innerHTML+='</div>';
        
        tmp = i;
    }); 
    innerHTML+='</div>';
    container.innerHTML = innerHTML;
    }
    drawHtml()    
</script>

Answer 3

此解决方案适用于您的问题，但请注意：这不是非常有效的代码，请自行决定是否改进此代码。

let container = document.querySelector('.container');

let arr = [{i: 0, j: 0}, {i: 0, j: 1}, {i: 0, j: 2}, {i: 1, j: 0}, {i: 1, j: 1}, {i: 1, j: 2}, {i: 2, j: 0}, {i: 2, j: 1}, {i: 2, j: 2}];


container.innerHTML = drawHtml(arr, 3);

function drawHtml(arr, rowLength) {
  // step 1: group cells into group by `rowLength`
  const groupedCellsBy = arr.reduce((acc, cell, indexOf) => {
    const groupIndex = Math.floor(indexOf / rowLength);
    if (acc[groupIndex] === undefined) {
      acc[groupIndex] = [cell];
    } else {
      acc[groupIndex].push(cell);
    }
    return acc;
  }, []);
 
  // step 2: render grouped cells into html
  const resultHtml = groupedCellsBy.reduce((html, group, groupIndex) => {
    return html += `
            <div class="row row-${groupIndex}">
              ${group.reduce((rowHtml, cell) => {
                // substep 2.1: render cells from group into actual row's cells 
                return rowHtml += `<div class="cell cell-${cell.j}">
                    i: ${cell.i} j: ${cell.j}
                    <img src="https://example.com/image.png" alt="">
                </div>`;
              }, '')}
                
            </div>`
  }, '');

  return resultHtml;
}

div {
  border: 1px solid silver;
  color: cyan;
  padding: 1rem;
}

.row {
  display: table-row;
}

.cell {
  display: table-cell;
}

<section class="container" />

如何创建 html 行和列

How to create html rows and cols

html

javascript

rows