Javascript 如何创建html行和列

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

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()

let container=document.querySelector（'.container'）；
设arr=[{i:0，j:0}，{i:0，j:1}，{i:0，j:2}，{i:1，j:1}，{i:1，j:2}，{i:2，j:0}，{i:2，j:1}，{i:2，j:2}]；
函数drawHtml（）{
arr.forEach（单元格=>{
container.innerHTML+=`
`
}); 
}
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>

...
....
....

您可以创建一个临时数组，在循环时将

i

属性存储为对象id：

let container=document.querySelector（'.container'）；
设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}]；
函数drawHtml（）{
var-temp=[]；
arr.forEach（单元格=>{
if（单元i的温度指数）=-1）{
温度推力（电池i）；
container.innerHTML+=`
`;
}否则{
container.querySelector（`.row-${cell.i}`）.innerHTML+=`
`;
}
}); 
}
drawHtml（）

---

你能试试下面的代码吗

让container=document.querySelector（'.container'）；
设arr=[{i:0，j:0}，{i:0，j:1}，{i:0，j:2}，{i:1，j:1}，{i:1，j:2}，{i:2，j:0}，{i:2，j:1}，{i:2，j:2}]；
函数drawHtml（）{
var innerHTML=''；
var i=0，tmp=0；
innerHTML+=''；
arr.forEach（单元格=>{
i=parseInt（cell.i）；
if（tmp！=i）
innerHTML+=''；
innerHTML+=''；
innerHTML+=''；
innerHTML+=''；
tmp=i；
}); 
innerHTML+=''；
container.innerHTML=innerHTML；
}
drawHtml（）

这是您问题的有效解决方案，但请注意：这不是非常有效的代码，您可以自由填写以改进此代码

let container=document.querySelector（'.container'）；
设arr=[{i:0，j:0}，{i:0，j:1}，{i:0，j:2}，{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）；
函数drawHtml（arr，rowLength）{
//步骤1：按“行长”将单元格分组`
const groupedCellsBy=arr.reduce（（acc，cell，indexOf）=>{
const groupIndex=数学楼层（indexOf/行长）；
if（acc[groupIndex]==未定义）{
acc[groupIndex]=[cell]；
}否则{
acc[groupIndex]。推送（单元格）；
}
返回acc；
}, []);
//步骤2：将分组的单元格呈现为html
const resultHtml=groupedCellsBy.reduce（（html、group、groupIndex）=>{
返回html+=`
${group.reduce（（rowHtml，单元格）=>{
//子步骤2.1：将组中的单元格渲染为实际行的单元格
返回行HTML+=`
i:${cell.i}j:${cell.j}
`;
}, '')}
`
}, '');
返回结果tml；
}

div{
边框：1px纯银；
颜色：青色；
填充：1rem；
}
.行{
显示：表格行；
}
.细胞{
显示：表格单元格；
}