जावास्क्रिप्ट का उपयोग करके टेबल को गतिशील रूप से उत्पन्न करने से टेबल संरचना पर अद्वितीय लचीलापन और नियंत्रण मिलता है, जिससे उपयोगकर्ता इनपुट या बाहरी स्रोतों से प्राप्त डेटा के आधार पर अनुकूलन की अनुमति मिलती है। यह स्थिर HTML टेबल की सीमाओं से परे है।
विषयसूची
HTML टेबल टैग्स: एक त्वरित समीक्षा
जावास्क्रिप्ट में गोता लगाने से पहले, आइए टेबल निर्माण के लिए उपयोग किए जाने वाले मौलिक HTML टैग्स पर फिर से विचार करें। एक बुनियादी HTML टेबल में ये मुख्य तत्व शामिल हैं:
<table>: संपूर्ण टेबल के लिए कंटेनर।<tr>: एक टेबल पंक्ति को परिभाषित करता है।<th>: एक टेबल शीर्षलेख सेल निर्दिष्ट करता है (आमतौर पर बोल्ड और केंद्रित)।<td>: एक टेबल डेटा सेल का प्रतिनिधित्व करता है।
यहाँ एक सरल उदाहरण दिया गया है:
<table>
<tr>
<th>नाम</th>
<th>आयु</th>
</tr>
<tr>
<td>जॉन डो</td>
<td>30</td>
</tr>
</table>
जावास्क्रिप्ट के साथ टेबल बनाना
जावास्क्रिप्ट हमें इन HTML तत्वों को प्रोग्रामेटिक रूप से उत्पन्न करने में सक्षम बनाता है, व्यापक HTML को मैन्युअल रूप से लिखे बिना पंक्तियों, स्तंभों और डेटा को जोड़ने के लिए दस्तावेज़ ऑब्जेक्ट मॉडल (DOM) में हेरफेर करता है। निम्नलिखित फ़ंक्शन इसे प्रदर्शित करता है:
function createTable(data, targetElementId) {
const table = document.createElement('table');
const headerRow = table.insertRow();
//पहली वस्तु की कुंजियों से शीर्षलेख पंक्ति को गतिशील रूप से बनाएँ
const keys = Object.keys(data[0]);
keys.forEach(key => {
const headerCell = headerRow.insertCell();
headerCell.textContent = key;
});
data.forEach(row => {
const dataRow = table.insertRow();
keys.forEach(key => {
const dataCell = dataRow.insertCell();
dataCell.textContent = row[key];
});
});
document.getElementById(targetElementId).appendChild(table);
}
const myData = [
{ Name: "John Doe", Age: 30, City: "New York" },
{ Name: "Jane Smith", Age: 25, City: "London" },
{ Name: "Peter Jones", Age: 40, City: "Paris" }
];
createTable(myData, 'myTableContainer'); //अपने HTML में id="myTableContainer" वाले div को निर्दिष्ट करें
टेबल को जोड़ने के लिए अपने HTML में “myTableContainer” ID वाले div को शामिल करना याद रखें।
उन्नत टेबल हेरफेर तकनीकें
इस बुनियादी उदाहरण को महत्वपूर्ण रूप से बढ़ाया जा सकता है। निम्नलिखित सुविधाओं को शामिल करने पर विचार करें:
- शैलीकरण: उपस्थिति को अनुकूलित करने के लिए CSS लागू करें (जैसे, कक्षाओं या इनलाइन शैलियों का उपयोग करके)।
- इवेंट हैंडलिंग: इंटरैक्टिविटी जोड़ें, जैसे शीर्षकों पर क्लिक करके स्तंभों को सॉर्ट करना या उपयोगकर्ता इनपुट के आधार पर पंक्तियों को फ़िल्टर करना।
- पृष्ठांकन: पृष्ठों में डेटा प्रदर्शित करके बड़े डेटासेट को संभालें।
- डेटा स्रोत: टेबल को गतिशील रूप से पॉप्युलेट करने के लिए API या डेटाबेस से डेटा प्राप्त करें।
HTML, CSS और जावास्क्रिप्ट को मिलाकर, आप अपनी विशिष्ट आवश्यकताओं के अनुसार अत्यधिक गतिशील और उत्तरदायी टेबल बना सकते हैं।