javascript - 构建一个包含多行的表，同时限制 TD 的数量？

Question

我正在建立一个由两行组成的表格。第一行保存图像，第二行保存相关文本。

直到现在我才意识到我需要每行有某种类型的“最大列”。

但是，我无法想出一种方法来实现这个变量 max (我尝试了很多，比如 while 循环以及跟踪到目前为止完成的计数)。

var max = 5 //needs to be flexible
var tr = document.createElement("tr");

for (var i = 0; i < this.structures.length; i++){ //image row
    var td = document.createElement("td");
    var img = new Image()
        td.appendChild(img);            
    tr.appendChild(td);
}
table.appendChild(tr);


var tr = document.createElement("tr");

for (var i = 0; i < this.structures.length; i++){ // text row
    var td = document.createElement("td");
        td.innerHTML = "bla"
}
table.appendChild(tr);

有人可以建议吗？

Answer 1

如果您实际上想要多于两行来保存大于最大值的图像，则只需在每次 i 的值能被最大值整除时再创建两行即可。

此外，使用单独的 tbody 元素可能是个好主意，因为您正在创建一个可能需要这样获取的分组。

var structures = [
   {text: "red",   src: "http://dummyimage.com/100/f00"
}, {text: "blue",  src: "http://dummyimage.com/100/00f"
}, {text: "green", src: "http://dummyimage.com/100/0f0"
}, {text: "red",   src: "http://dummyimage.com/100/f00"
}, {text: "blue",  src: "http://dummyimage.com/100/00f"
}, {text: "green", src: "http://dummyimage.com/100/0f0"
}, {text: "red",   src: "http://dummyimage.com/100/f00"
}, {text: "blue",  src: "http://dummyimage.com/100/00f"
}, {text: "green", src: "http://dummyimage.com/100/0f0"
}, {text: "red",   src: "http://dummyimage.com/100/f00"
}, {text: "blue",  src: "http://dummyimage.com/100/00f"
}, {text: "green", src: "http://dummyimage.com/100/0f0"
}];

var max = 5;
var table = document.querySelector("#t");
var tbody, tr1, tr2;

for (var i = 0; i < structures.length; i++) {
  if (i % max === 0) {
    tbody = table.appendChild(document.createElement("tbody"));
    tr1 = tbody.insertRow(-1);
    tr2 = tbody.insertRow(-1);
  }
  tr1.insertCell(-1).appendChild(new Image()).src = structures[i].src;
  tr2.insertCell(-1).textContent = i + ": " + structures[i].text;
}

<table id=t></table>