如何创建html行和列

问题描述 投票：0回答：2

如何从具有坐标的数组中仅使三行各包含三个元素。到目前为止，我正在制作重复的行丝毫元素

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
2个回答
0
投票

您应该在创建DOM之后运行该函数。因此，将函数包装在body onload中。

<html>
  <body onload="onLoad();">
     <div class="container"></div>
  </body>
</html>

function onLoad() {
  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();
}

有关document.onload的更多信息，请检出此answer。

0
投票

您可以创建一个临时数组以在循环时将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>
0
投票

您可以尝试以下代码吗？>

<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>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.