CODEWITHSUNDEEP
dom
Matt
Matt

Reputation: 125

HTML dom insertRow()

I run into a problem while tring to add new row to Table. The problem is the new row is added into blcok rather than block.

function myFunction() {
    var table = document.getElementById("myTable");
    var row = table.insertRow(1);
    var cell1 = row.insertCell(0);
    var cell2 = row.insertCell(1);
    cell1.innerHTML = "NEW CELL1";
    cell2.innerHTML = "NEW CELL2";
}
table{
  border: 1px solid #ccc;
}
<table id="myTable">
   <thead>
        <tr>
         <th>Product</th>
         <th>Description</th>
        </tr>
   </thead>

   <tbody>
         //new row is supposed to add into here.
   <tbody>
</table>
<br>

<button onclick="myFunction()">Try it</button>

Thanks for any help.

Upvotes: 0

Views: 66

Answers (1)

Shubham Khatri
Shubham Khatri

Reputation: 281754

You wanted to add new row to tbody, so select tbody first using getElementsByTagName("tbody") on . Also use insertRow(0) instead of insertRow(1)

function myFunction() {
    var table = document.getElementById("myTable");
    var tbody = table.getElementsByTagName('tbody');
    console.log(tbody)
    var row = tbody[0].insertRow(0);
    var cell1 = row.insertCell(0);
    var cell2 = row.insertCell(1);
    cell1.innerHTML = "NEW CELL1";
    cell2.innerHTML = "NEW CELL2";
}
table{
  border: 1px solid #ccc;
}
<table id="myTable">
   <thead>
        <tr>
         <th>Product</th>
         <th>Description</th>
        </tr>
   </thead>

   <tbody>
         //new row is supposed to add into here.
   <tbody>
</table>
<br>

<button onclick="myFunction()">Try it</button>

Upvotes: 1

Related Questions