HTML टेबल में गतिशील रूप से पंक्तियाँ जोड़ना वेब डेवलपमेंट में एक सामान्य आवश्यकता है, खासकर इंटरैक्टिव यूजर इंटरफेस बनाते समय। यह ट्यूटोरियल jQuery और प्लेन जावास्क्रिप्ट दोनों का उपयोग करके इसे प्राप्त करने के कुशल तरीकों को दर्शाता है, जिससे आप अपनी परियोजना के लिए सबसे उपयुक्त दृष्टिकोण चुन सकते हैं।
विषयसूची
- jQuery के
append()औरprepend()के साथ टेबल पंक्तियाँ जोड़ना - प्लेन जावास्क्रिप्ट के साथ टेबल पंक्तियाँ जोड़ना
jQuery के append() और prepend() के साथ टेबल पंक्तियाँ जोड़ना
jQuery DOM को हेरफेर करने का एक संक्षिप्त और कुशल तरीका प्रदान करता है। इसके append() और prepend() तरीके टेबल संरचनाओं के साथ सहज रूप से एकीकृत होते हैं।
आइए एक नमूना HTML टेबल पर विचार करें:
<table id="myTable">
<thead>
<tr>
<th>नाम</th>
<th>आयु</th>
<tr>
</thead>
<tbody>
<!-- पंक्तियाँ यहाँ जोड़ी जाएँगी -->
</tbody>
</table>
jQuery का उपयोग करके एक नई पंक्ति जोड़ने के लिए:
// टेबल बॉडी प्राप्त करें
let $tableBody = $('#myTable tbody');
// नई पंक्ति बनाएँ
let $newRow = $('<tr>');
// सेल बनाएँ और जोड़ें
$newRow.append('<td>नया नाम</td>');
$newRow.append('<td>30</td>');
// टेबल बॉडी में पंक्ति जोड़ें
$tableBody.append($newRow);
यह कोड स्निपेट टेबल बॉडी का चयन करता है, एक नया पंक्ति तत्व बनाता है, डेटा सेल जोड़ता है, और टेबल में पूरी पंक्ति जोड़ता है। प्रीपेंडिंग (शुरुआत में जोड़ने) के लिए, बस $tableBody.prepend($newRow); का उपयोग करें।
अधिक जटिल परिदृश्यों या कई पंक्तियाँ जोड़ने के लिए, सीधे पंक्ति HTML स्ट्रिंग बनाना अधिक कुशल हो सकता है:
let newRowHTML = `<tr><td>एक और नाम</td><td>25</td></tr>`;
$tableBody.append(newRowHTML);
XSS भेद्यताओं को रोकने के लिए उपयोगकर्ता द्वारा आपूर्ति किए गए डेटा को साफ करना याद रखें।
प्लेन जावास्क्रिप्ट के साथ टेबल पंक्तियाँ जोड़ना
मूल जावास्क्रिप्ट दृष्टिकोण को समझने से DOM हेरफेर की गहरी समझ मिलती है। हालांकि अधिक विस्तृत है, यह बाहरी निर्भरताओं से बचा जाता है।
let tableBody = document.getElementById('myTable').querySelector('tbody');
let newRow = document.createElement('tr');
let nameCell = document.createElement('td');
let ageCell = document.createElement('td');
nameCell.textContent = 'और एक नाम';
ageCell.textContent = '40';
newRow.appendChild(nameCell);
newRow.appendChild(ageCell);
tableBody.appendChild(newRow);
यह कोड मानक जावास्क्रिप्ट विधियों का उपयोग करके सीधे DOM को हेरफेर करता है। वह विधि चुनें जो आपकी परियोजना की आवश्यकताओं और jQuery के साथ आपके आराम के स्तर के अनुकूल हो। यदि jQuery उदाहरणों का उपयोग कर रहे हैं, तो jQuery लाइब्रेरी को शामिल करना याद रखें: <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>