HTML DOM टेबलरो ऑब्जेक्ट: <tr> एलिमेंट बनाना और मैनिपुलेट करना

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

टेबलरो ऑब्जेक्ट बनाना

सिंटैक्स

document.createElement("TR");

टेबलरो ऑब्जेक्ट के गुण

टेबलरो ऑब्जेक्ट के मेथड्स

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

<!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 class="table-body">
      <tr> <td>जॉन</td> <td>English</td> </tr>
      <tr> <td>एलन</td> <td>जर्मनी</td> </tr>
    </tbody>
  </table>
  <button onclick="get()" class="btn">टेबलरो बनाएं</button>
  <script>
    function get() {
      var tr = document.createElement("TR");
      tr.innerHTML = "<td>मारियो</td><td>फ्रेंच</td>";
      document.querySelector(".table-body").appendChild(tr);
    }
  </script>
</body>
</html>

आउटपुट

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

rowIndex vs sectionRowIndex

<table>
  <thead>          <!-- sectionRowIndex: 0 -->
    <tr><th>हेडर</th></tr>  <!-- rowIndex: 0 -->
  </thead>
  <tbody>          <!-- sectionRowIndex: 0 -->
    <tr><td>डेटा 1</td></tr>  <!-- rowIndex: 1 -->
    <tr><td>डेटा 2</td></tr>  <!-- rowIndex: 2 -->
  </tbody>
  <tfoot>          <!-- sectionRowIndex: 0 -->
    <tr><td>फुटर</td></tr>  <!-- rowIndex: 3 -->
  </tfoot>
</table>

सेल मैनिपुलेशन उदाहरण

var row = table.rows[1]; // दूसरी पंक्ति प्राप्त करें

// सेल जोड़ें
var cell = row.insertCell(0); // पहली स्थिति में
cell.textContent = "नया सेल";

// सेल हटाएं
row.deleteCell(1); // दूसरी सेल हटाएं

// सभी सेल्स पर पुनरावृति
for (var i = 0; i < row.cells.length; i++) {
  console.log(row.cells[i].textContent);
}