HTML DOM टेबल insertRow() मेथड: टेबल में नई पंक्ति जोड़ना

HTML DOM टेबल insertRow() मेथड एक खाली <tr> एलिमेंट जनरेट करता है और इसे HTML दस्तावेज़ में टेबल में जोड़ता है।

सिंटैक्स

object.insertRow(index)

यहां index एक संख्या है जो सम्मिलित करने के लिए पंक्ति की स्थिति निर्दिष्ट करती है। इंडेक्स 0-आधारित है।

उदाहरण: नई पंक्ति बनाना

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

आउटपुट

1. प्रारंभ में: 3 पंक्तियां (1 हेडर जैसी + 2 डेटा)
2. "पंक्ति बनाएं" क्लिक: इंडेक्स 1 पर नई पंक्ति डाली जाती है (पहली डेटा पंक्ति से पहले)
3. परिणाम: नई पंक्ति "मैक्सिमिलियन, 081717" दूसरी पंक्ति बन जाती है

इंडेक्स व्यवहार

सर्वोत्तम अभ्यास

• सुरक्षित सम्मिलन: table.insertRow(-1) या table.insertRow(table.rows.length) अंत में जोड़ने के लिए
• सेल जोड़ना: row.insertCell() का उपयोग करें innerHTML के बजाय
• tbody में सम्मिलन: विशिष्ट tbody.insertRow() का उपयोग करें सेक्शन नियंत्रण के लिए

सेल्स के साथ पूर्ण उदाहरण

function addRow(table, data) {
  var row = table.insertRow(-1); // अंत में जोड़ें
  data.forEach(function(cellData) {
    var cell = row.insertCell();
    cell.textContent = cellData;
  });
  return row;
}

// उपयोग
addRow(document.querySelector('table'), ['नया', 'डेटा', 'पंक्ति']);