HTML टेबल को क्रमिक रूप से भरना

मान लीजिए कि हमारे पास इस प्रकार की एक खाली HTML टेबल है:

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

आइए इस टेबल को सेल्स से भरें और ऐसा करें कि इन सेल्स में 1 से 9 तक की संख्याएँ हों। यहाँ एक उदाहरण है कि हमें क्या प्राप्त करना चाहिए:

html<table id="table">
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
  <tr>
    <td>4</td>
    <td>5</td>
    <td>6</td>
  </tr>
  <tr>
    <td>7</td>
    <td>8</td>
    <td>9</td>
  </tr>
</table>

आइए कार्यान्वयन शुरू करते हैं।

शुरुआत में, आइए बस 3 बाय 3 आकार की एक टेबल बनाएं, जो 'x' अक्षरों से भरी हो:

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');
    td.textContent = 'x';
    tr.appendChild(td);
  }
  
  table.appendChild(tr);
}

आइए अब ऐसा करें कि 'x' अक्षरों के स्थान पर सेल्स में आरोही क्रम में संख्याएँ लिखी जाएँ।

इसके लिए, हमें एक और काउंटर पेश करना होगा, जो आंतरिक लूप के प्रत्येक पुनरावृत्ति में अपने मानों को क्रमिक रूप से बढ़ाएगा, इस प्रकार:

javascriptlet table = document.querySelector('#table');

let k = 1; // काउंटर का प्रारंभिक मान
for (let i = 0; i < 3; i++) {
  let tr = document.createElement('tr');
  
  for (let i = 0; i < 3; i++) {
    let td = document.createElement('td');
    
    td.textContent = k; // सेल में काउंटर लिखें
    k++; // काउंटर बढ़ाएँ
    
    tr.appendChild(td);
  }
  
  table.appendChild(tr);
}