jQuery में तालिका पंक्ति जोड़ना: शुरुआती और पेशेवरों के लिए ट्यूटोरियल

शुरुआती लोगों के लिए ऑनलाइन Python प्रशिक्षक

Python आसानी से सीखें बिना सिद्धांत के बोझ के। स्वचालित जांच के साथ व्यावहारिक कार्य हल करें और ब्राउज़र में सीधे कोड लिखें।

पाठ्यक्रम शुरू करें

jQuery की मदद से तालिका में पंक्ति कैसे जोड़ें: पूर्ण गाइड

\n\n

HTML तालिकाओं के साथ काम करना फ्रंटएंड डेवलपर के सबसे सामान्य कार्यों में से एक है। और तालिका में गतिशील रूप से नई पंक्तियाँ जोड़ना तो एक क्लासिक काम है। कल्पना करें: आप एक ऑनलाइन स्टोर, ब्लॉग के लिए एडमिन पैनल, या टास्क ट्रैकिंग सिस्टम बना रहे हैं। लगभग हमेशा यह आवश्यक होता है कि उपयोगकर्ता "जोड़ें" बटन पर क्लिक कर सके - और तालिका में एक नई प्रविष्टि दिखाई दे।

\n\n

आज हम विस्तार से जानेंगे कि jQuery में तालिका पंक्ति कैसे जोड़ें। यह केवल शुष्क सिद्धांत नहीं है, बल्कि कोड के व्यावहारिक उदाहरणों के साथ एक व्यावहारिक चरण-दर-चरण ट्यूटोरियल है। आप सबसे लोकप्रिय तरीकों, संभावित समस्याओं और सर्वोत्तम प्रथाओं के बारे में जानेंगे। चलिए शुरू करते हैं!

\n\n

शुद्ध JavaScript के बजाय jQuery क्यों?

\n\n

यह एक उचित प्रश्न है। हाँ, नेटिव JavaScript लंबे समय से DOM के साथ काम कर सकता है, और document.createElement विधि को किसी ने रद्द नहीं किया है। लेकिन jQuery तालिका पंक्ति जोड़ना तेज़ और आसान सिखाता है, खासकर यदि आप शुरुआती हैं। jQuery क्रॉस-ब्राउज़र संगतता का ध्यान रखता है और एक सुरुचिपूर्ण सिंटैक्स प्रदान करता है। इसके अलावा, प्रोडक्शन में लाखों लाइनें jQuery में लिखी गई हैं - और उन्हें बनाए रखने की आवश्यकता है। इसलिए इन तकनीकों का ज्ञान एक वेब डेवलपर के लिए एक अनिवार्य कौशल है।

\n\n

हमारे प्रयोगों के लिए बेसिक HTML

\n\n

शुरू करने के लिए हमें एक सरल तालिका चाहिए। यहाँ इसका मार्कअप है - इसे अपनी HTML फ़ाइल या CodePen जैसे सैंडबॉक्स में कॉपी करें।

\n\n

\n<!DOCTYPE html>\n<html lang="ru">\n<head>\n    <meta charset="UTF-8">\n    <title>jQuery तालिका में पंक्ति जोड़ें</title>\n    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>\n</head>\n<body>\n\n<h2>कर्मचारी सूची</h2>\n<table id="employees" border="1">\n    <thead>\n        <tr>\n            <th>नाम</th>\n            <th>पद</th>\n            <th>वेतन</th>\n        </tr>\n    </thead>\n    <tbody>\n        <tr>\n            <td>अन्ना</td>\n            <td>डेवलपर</td>\n            <td>150 000 ₽</td>\n        </tr>\n        <tr>\n            <td>इवान</td>\n            <td>डिज़ाइनर</td>\n            <td>120 000 ₽</td>\n        </tr>\n    </tbody>\n</table>\n\n<button id="addRow">पंक्ति जोड़ें</button>\n\n<script>\n// यहाँ हमारा jQuery कोड होगा\n</script>\n\n</body>\n</html>\n

\n\n

ध्यान दें: तालिका में thead (हेडर) और tbody (बॉडी) है। यह सही सिमैंटिक संरचना है। jQuery में तालिका पंक्ति जोड़ना हम सीधे tbody में करेंगे, न कि पूरी तालिका में - इस तरह हम हेडर को नहीं तोड़ेंगे।

\n\n

विधि #1: jQuery append - क्लासिक

\n\n

सबसे लोकप्रिय तरीका .append() विधि का उपयोग करना है। यह चयनित तत्व के अंत में सामग्री जोड़ता है। हमारे मामले में - tbody के अंत में।

\n\n

मान लीजिए हम एक नया कर्मचारी जोड़ना चाहते हैं। कोड इस प्रकार होगा:

\n\n

\n$('#addRow').on('click', function() {\n    var newRow = '<tr>' +\n                 '<td>प्योत्र</td>' +\n                 '<td>प्रबंधक</td>' +\n                 '<td>100 000 ₽</td>' +\n                 '</tr>';\n    $('#employees tbody').append(newRow);\n});\n

\n\n

सब कुछ सरल है: हम नई तालिका पंक्ति के साथ एक HTML स्ट्रिंग बनाते हैं और इसे jQuery तालिका पंक्ति जोड़ें विधि append का उपयोग करके सम्मिलित करते हैं। अब बटन पर प्रत्येक क्लिक पर तालिका में प्योत्र-प्रबंधक दिखाई देगा।

\n\n

महत्वपूर्ण: यदि आपके मार्कअप में tbody नहीं है, तो jQuery सीधे table में पंक्ति जोड़ सकता है, लेकिन इस स्थिति में यह गलत जगह पर आ सकती है। हमेशा tbody का उपयोग करें!

\n\n