JavaScript'te HTML Tabloları Oluşturma

Böyle boş bir HTML tablomuz olduğunu varsayalım:

html<table id="table"></table>

Bu tabloyu satırlar ve sütunlarla dolduralım. İşte elde etmemiz gereken sonucun bir örneği:

html<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>

Sorunu çözmek için iki iç içe döngüye ihtiyacımız var. İlk döngü tablonun satırlarını oluşturacak, ikincisi ise her satırdaki hücreleri oluşturacak:

javascriptlet 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);
}

Задание 1

Boş bir HTML tablosu verildi. İki iç içe for döngüsü kullanarak bu tabloyu 5 satır ve 5 sütunla doldurun.

Задание 2

Önceki görevi, tablonun 10 satır ve 5 sütun boyutunda oluşturulacak şekilde değiştirin.

Задание 3

Önceki görevi, her bir td'ye 'x' metni eklenecek şekilde değiştirin.

Задание 4

Genişliği ve yüksekliği iki input alanında belirlenen (bir 5 x 10 hücre tablosu gibi) tablo üreteci uygulayın.