Funksjon for å opprette HTML-tabeller i JavaScript
La oss nå lage funksjonen createTable,
som vil opprette en tabell med gitt størrelse
og legge den til slutten av et gitt element.
La den første parameteren til funksjonen vår være antall rader, den andre parameteren - antall kolonner, og den tredje - en referanse til DOM-elementet, inni som tabellen vår vil bli opprettet.
La oss se hvordan vi vil bruke den beskrevne funksjonen når den er opprettet. La oss for eksempel si at vi har gitt denne div-en:
<div id="elem"></div>
La oss lage en tabell inni denne div-en
3 på 4:
let div = document.querySelector('#elem');
createTable(3, 4, div);
La oss nå si at vi har gitt to div-er:
<div id="elem1"></div>
<div id="elem2"></div>
La oss lage vår egen tabell i hver av disse div-ene:
let div1 = document.querySelector('#elem1');
createTable(3, 4, div1);
let div2 = document.querySelector('#elem2');
createTable(5, 6, div2);
For at de opprettede tabellene umiddelbart skal være synlige, kan du legge til litt CSS, for eksempel slik:
td {
width: 50px;
height: 50px;
border: 1px solid black;
}
Her er skjelettet til den beskrevne funksjonen:
function createTable(rows, cols, parent) {
let table = document.createElement('table');
// her oppretter vi en tabell med rows rader og cols kolonner
for () {
for () {
}
}
parent.appendChild(table);
}
Fullfør koden til den ovenfor viste funksjonen. Test funksjonaliteten til den ferdige funksjonen.
