How to insert a row in an HTML table body in JavaScript

by

If you want to add a row into the tbody, get a reference to it and call its insertRow method.

var tbodyRef = document.getElementById('myTable').getElementsByTagName('tbody')[0];

// Insert a row at the end of table
var newRow = tbodyRef.insertRow();

// Insert a cell at the end of the row
var newCell = newRow.insertCell();

// Append a text node to the cell
var newText = document.createTextNode('new row');
newCell.appendChild(newText);
<table id="myTable">
  <thead>
    <tr>
      <th>My Header</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>initial row</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>My Footer</td>
    </tr>
  </tfoot>
</table>

(old demo on JSFiddle)

More Related Contents:

  1. Convert json data to a html table [closed]
  2. How can I let a table’s body scroll but keep its head fixed in place?
  3. HTML Table to Excel Javascript
  4. Open window in JavaScript with HTML inserted
  5. HTML table with fixed headers and a fixed column? [closed]
  6. HTML Table with vertical rows
  7. Remove table row after clicking table row delete button
  8. Convert html table to array in javascript
  9. Convert TD columns into TR rows
  10. How to tell which row number is clicked in a table?
  11. How to display Image dynamically on UI?
  12. Large dynamically sized html table with a fixed scroll row and fixed scroll column
  13. show/hide html table columns using css
  14. How do I export multiple html tables to excel?
  15. Dynamically adding div on button click and changing Id of each?
  16. How to make page loaders/animations/transitions
  17. Get specific text from html tag jquery [duplicate]
  18. Open URL in same window and in same tab
  19. How do I add an “Add to Favorites” button or link on my website?
  20. Cropping images in the browser BEFORE the upload [closed]
  21. Refresh a Div that has a Google ad inside it
  22. HTML : draw table using innerHTML
  23. How to synchronize scrolling positions for several iframes
  24. React.js this.props.data.map() is not a function
  25. What Is A Text Node, Its Uses? //document.createTextNode()
  26. What is ?
  27. Jquery click event not firing on the element created dynamically using jquery
  28. Detect if dropdown navigation would go off screen and reposition it
  29. Converting sanitised html back to displayable html
  30. Creating a Clickable Grid in a Web Browser

Leave a Comment