HTML टेबल को क्रमिक रूप से भरना
मान लीजिए कि हमारे पास इस प्रकार की एक खाली HTML टेबल है:
<table id="table"></table>
आइए इस टेबल को सेल्स से भरें और ऐसा करें
कि इन सेल्स में 1 से 9 तक की संख्याएँ हों। यहाँ एक उदाहरण है कि हमें क्या प्राप्त करना चाहिए:
<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' अक्षरों से भरी हो:
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');
td.textContent = 'x';
tr.appendChild(td);
}
table.appendChild(tr);
}
आइए अब ऐसा करें कि 'x' अक्षरों के स्थान पर सेल्स में आरोही क्रम में संख्याएँ लिखी जाएँ।
इसके लिए, हमें एक और काउंटर पेश करना होगा, जो आंतरिक लूप के प्रत्येक पुनरावृत्ति में अपने मानों को क्रमिक रूप से बढ़ाएगा, इस प्रकार:
let 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);
}
5 पंक्तियों और 5 कॉलमों वाली एक HTML टेबल को स्क्रीन पर प्रदर्शित करें, ताकि
इसकी सेल्स में 1 से 25 तक की संख्याएँ क्रमिक रूप से हों।
पिछले कार्य को इस प्रकार संशोधित करें कि
टेबल की सेल्स में 2 से 50 के बीच की सम संख्याएँ लिखी गई हों।