जावास्क्रिप्ट का उपयोग करके HTML टेबल कैसे बनाएं

May 04 2023
कभी-कभी, हम जावास्क्रिप्ट के साथ एक HTML टेबल बनाना चाहते हैं। इस लेख में, हम देखेंगे कि जावास्क्रिप्ट के साथ HTML तालिका कैसे बनाई जाती है।
अनस्प्लैश पर एल्विन एंगलर द्वारा फोटो

कभी-कभी, हम जावास्क्रिप्ट के साथ एक HTML टेबल बनाना चाहते हैं।

इस लेख में, हम देखेंगे कि जावास्क्रिप्ट के साथ HTML तालिका कैसे बनाई जाती है।

जावास्क्रिप्ट का उपयोग करके एक HTML टेबल बनाएं

हम मेथड से HTML टेबल बना सकते हैं document.createElement

उदाहरण के लिए, यदि हमारे पास निम्न HTML है:

<div>
</div>

const div = document.querySelector("div");
const table = document.createElement('table');
table.border = '1';
const tableBody = document.createElement('tbody');
table.appendChild(tableBody);
for (let i = 0; i < 3; i++) {
  const tr = document.createElement('tr');
  tableBody.appendChild(tr);
  for (let j = 0; j < 4; j++) {
    const td = document.createElement('td');
    td.width = '75';
    td.appendChild(document.createTextNode(`cell ${i}-${j}`));
    tr.appendChild(td);
  }
}
div.appendChild(table);

फिर हम इसके साथ तालिका तत्व बनाते हैं:

const table = document.createElement('table');

table.border = '1';

const tableBody = document.createElement('tbody');

table.appendChild(tableBody);

for (let i = 0; i < 3; i++) {
  const tr = document.createElement('tr');
  tableBody.appendChild(tr);
  for (let j = 0; j < 4; j++) {
    const td = document.createElement('td');
    td.width = '75';
    td.appendChild(document.createTextNode(`cell ${i}-${j}`));
    tr.appendChild(td);
  }
}

const tr = document.createElement('tr');

tableBody.appendChild(tr);

for (let j = 0; j < 4; j++) {
  const td = document.createElement('td');
  td.width = '75';
  td.appendChild(document.createTextNode(`cell ${i}-${j}`));
  tr.appendChild(td);
}

फिर के अंतिम बच्चे के रूप में tr.appendChild(td)जोड़ें ।tdtr

अंत में, हम साथ tableमें जोड़ते हैं div:

div.appendChild(table);

हम मेथड से HTML टेबल बना सकते हैं document.createElement

PlainEnglish.io पर अधिक सामग्री

हमारे मुफ़्त साप्ताहिक न्यूज़लेटर के लिए साइन अप करें । ट्विटर , लिंक्डइन , यूट्यूब और डिस्कॉर्ड पर हमें फॉलो करें