HTML táblázatok készítése JavaScripttel
Tegyük fel, hogy van egy üres HTML táblázatunk:
<table id="table"></table>
Töltsük ki ezt a táblázatot sorokkal és oszlopokkal. Íme egy példa arra, amit kapnunk kell:
<table id="table">
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
A feladat megoldásához két egymásba ágyazott ciklusra van szükségünk. Az első ciklus a táblázat sorait hozza létre, a második pedig a cellákat minden sorban:
let table = document.querySelector('#table');
for (let i = 0; i < 3; i++) {
let tr = document.createElement('tr');
for (let i = 0; i < 3; i++) {
let td = document.createElement('td');
tr.appendChild(td);
}
table.appendChild(tr);
}
Adott egy üres HTML táblázat. Két egymásba ágyazott
for ciklus segítségével töltse ki ezt a
táblázatot 5 sorral és 5 oszloppal.
Módosítsa az előző feladatot úgy, hogy
a táblázat 10 sor
és 5 oszlop méretű legyen.
Módosítsa az előző feladatot úgy, hogy
minden td elembe 'x' szöveg kerüljön.
Valósítson meg táblázatgenerátort, ahol a táblázat szélességét és magasságát
két input mezőben adjuk meg (például
5 és 10 cella méretű táblázat).