HTML DOM टेबल tBodies कलेक्शन: सभी <tbody> एलिमेंट्स एक्सेस करना

HTML DOM टेबल tBodies कलेक्शन एक HTML दस्तावेज़ में टेबल के सभी <tbody> एलिमेंट्स का कलेक्शन लौटाता है।

सिंटैक्स

object.tBodies

tBodies कलेक्शन के गुण

tBodies कलेक्शन के मेथड्स

उदाहरण: tBodies काउंट प्राप्त करना

<!DOCTYPE html>
<html>
<style>
  body { color: #000; background: lightblue; height: 100vh; text-align: center; }
  table { margin: 2rem auto; }
  .show { font-size: 1.2rem; }
  .btn { background: #db133a; border: none; height: 2rem; border-radius: 2px; width: 40%; display: block; color: #fff; outline: none; cursor: pointer; margin: 1rem auto; }
</style>
<body>
  <h1>DOM टेबल tBodies कलेक्शन डेमो</h1>
  <table border="2">
    <thead>
      <tr> <th>नाम</th> <th>रोल नं.</th> </tr>
    </thead>
    <tbody>
      <tr> <td>जॉन</td> <td>071717</td> </tr>
      <tr> <td>जेन</td> <td>031717</td> </tr>
    </tbody>
    <tbody>
      <tr> <td>एलन</td> <td>021717</td> </tr>
      <tr> <td>मारियो</td> <td>011717</td> </tr>
    </tbody>
  </table>
  <button onclick="get()" class="btn">टेबल बॉडी की संख्या प्राप्त करें</button>
  <div class="show"></div>
  <script>
    function get() {
      var table = document.querySelector('table');
      document.querySelector('.show').innerHTML = 'टेबल बॉडी एलिमेंट्स की संख्या: ' + table.tBodies.length;
    }
  </script>
</body>
</html>

आउटपुट

1. प्रारंभ में: "टेबल बॉडी एलिमेंट्स की संख्या: 2" (बटन क्लिक से पहले)
2. बटन क्लिक के बाद: समान परिणाम प्रदर्शित होता है

व्यावहारिक उपयोग

• कई <tbody> सेक्शंस वाली टेबल्स को प्रोसेस करना
• डायनामिकली <tbody> जोड़ना/हटाना
• विशिष्ट टेबल सेक्शन पर पुनरावृति करना
• प्रत्येक <tbody> के लिए अलग स्टाइलिंग लागू करना

नोट

यदि टेबल में कोई <tbody> नहीं है, तो ब्राउज़र स्वचालित रूप से एक बनाता है (DOM में), इसलिए length कम से कम 1 होगा।