HTML DOM टेबलडेटा ऑब्जेक्ट: <td> एलिमेंट बनाना और गुण

HTML DOM टेबलडेटा ऑब्जेक्ट HTML दस्तावेज़ के <td> एलिमेंट को दर्शाता है।

टेबलडेटा ऑब्जेक्ट बनाना

सिंटैक्स

document.createElement("TD");

टेबलडेटा ऑब्जेक्ट के गुण

उदाहरण: डायनामिकली टेबलडेटा बनाना

<!DOCTYPE html>
<html>
<style>
  body { color: #000; background: lightblue; height: 100vh; text-align: center; }
  table { margin: 2rem auto; width: 400px; }
  .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 टेबलडेटा ऑब्जेक्ट डेमो</h1>
  <table border="2">
    <thead>
      <tr> <th>नाम</th> <th>भाषा</th> </tr>
    </thead>
    <tbody>
      <tr> <td>जॉन</td> <td>English</td> </tr>
      <tr> <td>एलन</td> <td>जर्मनी</td> </tr>
      <tr class="new-row"> </tr>
    </tbody>
  </table>
  <button onclick="get()" class="btn">एक टेबलडेटा बनाएं</button>
  <script>
    function get() {
      var td1 = document.createElement("TD");
      var td2 = document.createElement("TD");
      td1.innerHTML = "मारियो";
      td2.innerHTML = "फ्रेंच";
      document.querySelector('.new-row').appendChild(td1);
      document.querySelector('.new-row').appendChild(td2);
    }
  </script>
</body>
</html>

आउटपुट

1. प्रारंभ में: 2 डेटा पंक्तियों + 1 खाली पंक्ति वाली टेबल
2. "एक टेबलडेटा बनाएं" क्लिक: खाली पंक्ति में "मारियो" और "फ्रेंच" सेल्स जुड़ जाते हैं

सेल इंडेक्सिंग

<tr>
  <td>सेल 0</td>  <!-- cellIndex: 0 -->
  <td>सेल 1</td>  <!-- cellIndex: 1 -->
  <td>सेल 2</td>  <!-- cellIndex: 2 -->
</tr>

colSpan और rowSpan का उपयोग

// कॉलम फैलाना
td.colSpan = 2; // या td.setAttribute('colspan', '2')

// पंक्ति फैलाना
td.rowSpan = 3; // या td.setAttribute('rowspan', '3')

// दोनों
td.colSpan = 2;
td.rowSpan = 2;

headers एट्रिब्यूट (एक्सेसिबिलिटी)

<table>
  <thead>
    <tr>
      <th id="name-h">नाम</th>
      <th id="lang-h">भाषा</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td headers="name-h">जॉन</td>
      <td headers="lang-h">English</td>
    </tr>
  </tbody>
</table>