Javascript 根据输入更改innerHTML

我正在迭代一个JSON文件，并为给定的位置获得不同数量的特性。这可以是10个，也可以只有2个，具体取决于位置。我能够从JSON中检索每个位置的数据，并在此处迭代所有位置

目标：根据所在位置的功能数量，我想创建一个最多包含3列和/3行的表。如果有10个功能，只需制作3-3-3-1（2个空框）

var overlay=新的ol.overlay({
元素：document.getElementById（'overlay'），
定位：“左下”
});
var displayImage=函数（像素）{
var特征=[]；
map.forEachFeatureAtPixel（像素，功能（特征，层）{
功能。推送（功能）；
}，{耐打性：10}）；
如果（features.length>0）{
var rows=Math.ceil（features.length/3）；
var imag=[]；
风险值年数=[]；
console.log（特性）；
对于（变量i=0，ii=features.length；i

正如你可能看到的，到目前为止，我对它进行了硬编码，但这并不是最好的解决方案。我试图做一些事情，比如在字符串中添加…等，但当时我没有获得最大3列

欢迎提供任何帮助/链接！

祝您玩得开心：）

let test=[1,2,3,4,5,6,7,8,9,10,11]；
让innerHTMLStart=“”；
让innerHTMLEnd=“”
让innerHTML=innerHTMLStart；
设lastIndex=test.length-1；
//循环浏览我们的物品
对于（变量i=0；i0）{
innerHTML=innerHTML+“”
}
//将单元格添加到表中
innerHTML=innerHTML+“”+test[i]+“”；
如果（i==lastIndex）{
//最后一次迭代？有多少次？
//始终以3个单元格结束
如果（（i+1）%3==0）{
innerHTML=innerHTML+“”
}如果（（i+1）%2==0）{
innerHTML=innerHTML+“”
}否则{
console.log（“else”）
innerHTML=innerHTML+“”
}
}
}
innerHTML=innerHTML+innerHTMLEnd；
console.log（innerHTML）

我没有测试该代码，可能包含错误，但据我所知，下面的代码应该适合您的需要

var content ="<table class=\"fototable\"><tr>";
for(var t=0; t<imag.length; t++){
    content+="<td><button class=\"btn\" data-img=\" + imag[t] + \" onclick=\"myFunction(this)\"> " + years[t] + " </button></td>\n\";
    if((t+1)%3==0 && t!=(imag.length-1)){
        content+="</tr><tr>";
    }
}

for(var i = 0; i<3-imag.length%3; i++){
    content+="<td></td>";
}
content+="</tr></table>";

element.innerHtml = content;

var content=”“；
对于（var t=0；t您可以通过代码创建一个表，而无需创建HTML字符串-您可能需要查看或。这两个参考资料都解释了可用于表创建/编辑等的DOM HTMLTable元素@SaschaP感谢链接，我将查看！
var content ="<table class=\"fototable\"><tr>";
for(var t=0; t<imag.length; t++){
    content+="<td><button class=\"btn\" data-img=\" + imag[t] + \" onclick=\"myFunction(this)\"> " + years[t] + " </button></td>\n\";
    if((t+1)%3==0 && t!=(imag.length-1)){
        content+="</tr><tr>";
    }
}

for(var i = 0; i<3-imag.length%3; i++){
    content+="<td></td>";
}
content+="</tr></table>";

element.innerHtml = content;