如何创建 html 行和列答案

【问题标题】：How to create html rows and cols如何创建 html 行和列
【发布时间】：2020-07-24 02:20:39
【问题描述】：

如何从带有坐标的数组中只制作三行，每行包含三个元素。到目前为止，我正在使用元素制作重复的行

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>

【问题讨论】：

标签： javascript html rows

【解决方案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()

&lt;div class="container"&gt;&lt;/div&gt;

【讨论】：

【解决方案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>

【讨论】：

【解决方案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;
}

&lt;section class="container" /&gt;

【讨论】：