v1
- by zer00ne 12/25/202200
Setup HTML
<table >
<caption>TEST A</caption>
<thead>
<tr><th>A</th><th>B</th><th>C</th></tr>
</thead>
<tbody></tbody>
</table>
<table>
<caption>TEST B</caption>
<thead>
<tr><th>A</th><th>B</th><th>C</th></tr>
</thead>
<tbody></tbody>
</table>
<table>
<caption>TEST C</caption>
<thead>
<tr><th>A</th><th>B</th><th>C</th></tr>
</thead>
<tbody></tbody>
</table>
<table>
<caption>TEST D</caption>
<thead>
<tr><th>A</th><th>B</th><th>C</th></tr>
</thead>
<tbody></tbody>
</table>
Setup JavaScript
const data=[[591,917,494],[198,200,592],[319,593,343],[149,708,760],[289,132,762],[966,587,225],[921,510,888],[175,283,918],[944,852,330],[537,518,558],[896,927,461],[324,360,719],[800,421,524],[634,868,548],[182,340,239],[636,760,786],[860,744,616],[213,512,587],[274,236,190],[861,996,552],[761,649,814],[121,471,554],[385,538,813],[802,522,861],[468,479,870],[209,238,180],[210,314,782],[682,581,644],[996,375,580],[635,586,252],[538,640,141],[650,788,716],[654,666,578],[583,573,787],[948,968,708],[993,177,355],[404,187,596],[275,312,556],[820,481,133],[598,541,618],[424,574,753],[271,257,560],[294,246,553],[240,698,833],[860,597,219],[796,295,378],[497,834,902],[168,647,239],[745,988,788],[572,356,490],[274,957,519],[698,402,673],[798,522,743],[595,677,416],[369,786,154],[691,424,502],[465,820,533],[827,966,761],[297,947,385],[817,930,803],[609,567,369],[223,981,890],[275,387,404],[407,578,779],[713,595,428],[499,986,421],[241,310,591],[713,328,239],[152,949,826],[438,840,708],[478,114,571],[274,304,105],[239,253,916],[573,281,263],[179,502,936],[725,639,245],[467,542,488],[515,923,784],[464,258,573],[582,709,761],[138,734,836],[376,572,680],[361,478,709],[924,683,538],[379,677,378],[435,850,167],[950,546,976],[236,724,194],[314,525,639],[362,715,573],[320,965,799],[973,717,627],[122,856,371],[169,702,269],[580,826,127],[949,530,791],[625,845,701],[748,570,277],[669,955,453],[279,239,867]];
const T = document.querySelectorAll("table");
ready
const genData = (table, tArray) => {
let R = tArray.length;
let C = tArray[0].length;
const tB = document.createElement("tbody");
const frag = document.createDocumentFragment();
for (let r=0; r < R; r++) {
let row = tB.insertRow();
for (let c=0; c < C; c++) {
row.insertCell().textContent = tArray[r][c];
}
}
table.tBodies[0].remove();
frag.append(tB);
table.append(frag);
}
genData(T[0], data);
ready
const genData = (table, tArray) => {
let R = tArray.length;
let C = tArray[0].length;
const tB = document.createElement("tbody");
const frag = document.createDocumentFragment();
for (let r=0; r < R; r++) {
tB.innerHTML += `<tr></tr>`;
for (let c=0; c < C; c++) {
tB.rows[r].innerHTML += `<td>${tArray[r][c]}</td>`;
}
}
table.tBodies[0].remove();
frag.append(tB);
table.append(frag);
}
genData(T[1], data);ready
const genData = (table, tArray) => {
let R = tArray.length;
let C = tArray[0].length;
const tB = table.tBodies[0];
tB.replaceChildren();
for (let r=0; r < R; r++) {
let row = tB.insertRow();
for (let c=0; c < C; c++) {
row.insertCell().textContent = tArray[r][c];
}
}
}
genData(T[2], data);ready
const genData = (table, tArray) => {
let R = tArray.length;
let C = tArray[0].length;
const tB = table.tBodies[0];
tB.replaceChildren();
for (let r=0; r < R; r++) {
tB.innerHTML += `<tr></tr>`;
for (let c=0; c < C; c++) {
tB.rows[r].innerHTML += `<td>${tArray[r][c]}</td>`;
}
}
}
genData(T[3], data);