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

Question

I have an HTML table with a header and a footer:

<table id="myTable">
    <thead>
        <tr>
            <th>My Header</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>aaaaa</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>My footer</td>
        </tr>
    <tfoot>
</table>

I am trying to add a row in tbody with the following:

myTable.insertRow(myTable.rows.length - 1);

but the row is added in the tfoot section.

How do I insert tbody?

Tutorial w3schools.com/jsref/tryit.asp?filename=tryjsref_table_insertrow — Pandiyan Cool
– Pandiyan Cool, Commented Aug 20, 2013 at 11:39

wotanut · Accepted Answer · 2025-03-11 19:06:32Z

326

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

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

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

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

// Append a text node to the cell
const 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)

edited Mar 11 at 19:06

wotanut

191 silver badge7 bronze badges

answered Aug 20, 2013 at 11:20

Jonathan Naguin

14.8k7 gold badges52 silver badges76 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Vrankela Over a year ago

My code breaks because: Cannot read property 'insertRow' of null. Any suggestions?

Christian Strempfer Over a year ago

@Vrankela: Probably your selector is incorrect (first line in example).

inor Over a year ago

the above would fail the first time. instead check if there are no rows: var rows = tableRef.rows; var rowsSoFar = (rows==null) ? 0 : rows.length; var newRow = tableRef.insertRow(rowsSoFar);

jeanggi90 Over a year ago

Instead of tableRef.insertRow(tableRef.rows.length); you can simple use tableRef.insertRow(-1); to insert the row at the end of the table.

Lei Yang Over a year ago

how to insert entire row if i have entire <tr> ... </tr html string for all cell? above code seems to add one cell only.

|

Ruslan · Accepted Answer · 2021-08-03 19:13:04Z

52

You can try the following snippet using jQuery:

$(table).find('tbody').append("<tr><td>aaaa</td></tr>");

edited Aug 3, 2021 at 19:13

Ruslan

1814 silver badges17 bronze badges

answered Aug 20, 2013 at 11:13

Sasidharan

3,7603 gold badges21 silver badges37 bronze badges

5 Comments

Marwan Over a year ago

maybe you are right but sometimes you need to know the real stuff :) and as i say always know JavaScript before the using any library no hard feeling body ;)

Jose Manuel Abarca Rodríguez Over a year ago

I'm trying to apply your answer to my case but I couldn't, so I posted a new question, do you think that you can answer it and save me? ► stackoverflow.com/q/63194846/3298930 .

mLstudent33 Over a year ago

What is the syntax if I want a variable in place of aaaa?

aris melachroinos Over a year ago

...apend("<tr><td>" + myVar + "</td></tr>");

user2587656 Over a year ago

I tried this with plain javascript and it didn't work. I got a field where the html tags were shown as cell content. When you look in the browser console it looks perfect HTML, just the tr and td tags aren't interpreted as they should.

Peter Mortensen · Accepted Answer · 2019-11-19 13:03:30Z

38

Basic approach:

This should add HTML-formatted content and show the newly added row.

var myHtmlContent = "<h3>hello</h3>"
var tableRef = document.getElementById('myTable').getElementsByTagName('tbody')[0];

var newRow = tableRef.insertRow(tableRef.rows.length);
newRow.innerHTML = myHtmlContent;

edited Nov 19, 2019 at 13:03

Peter Mortensen

31.4k22 gold badges110 silver badges134 bronze badges

answered Dec 8, 2017 at 20:02

Kurkula

6,80228 gold badges140 silver badges216 bronze badges

2 Comments

jimiayler Over a year ago

My favorite solution: very elegant and with added flexibility to add inner HTML.

showtime Over a year ago

if you have given an id to the tr string then it will remove it so be carfeul.

Marwan · Accepted Answer · 2013-08-20 11:18:08Z

12

I think this script is what exactly you need

var t = document.getElementById('myTable');
var r =document.createElement('TR');
t.tBodies[0].appendChild(r)

answered Aug 20, 2013 at 11:18

Marwan

2,4021 gold badge21 silver badges35 bronze badges

2 Comments

Marwan Over a year ago

of course you need to modify your new row but i just offered the concept in the answer and left the rest to you :)

PJ_Finnegan Over a year ago

This has the advantage that you can append a cloned row, and avoid creating a new one, in order to maintain the CSS style.

Peter Mortensen · Accepted Answer · 2019-11-19 12:58:13Z

9

You're close. Just add the row to the tbody instead of table:

myTbody.insertRow();

Just get a reference to tBody (myTbody) before use. Notice that you don't need to pass the last position in a table; it's automatically positioned at the end when omitting argument.

A live demo is at jsFiddle.

edited Nov 19, 2019 at 12:58

Peter Mortensen

31.4k22 gold badges110 silver badges134 bronze badges

answered Aug 20, 2013 at 11:25

Teemu

23.5k7 gold badges61 silver badges113 bronze badges

Comments

Md. Jahid Hossain · Accepted Answer · 2021-05-17 11:13:21Z

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

let row = myTable.insertRow();
let cell1 = row.insertCell(0);
let cell2 = row.insertCell(1);
let cell3 = row.insertCell(2);

cell1.innerHTML = 1;
cell2.innerHTML = 'JAHID';
cell3.innerHTML = 23;

row = myTable.insertRow();
cell1 = row.insertCell(0);
cell2 = row.insertCell(1);
cell3 = row.insertCell(2);

cell1.innerHTML = 2;
cell2.innerHTML = 'HOSSAIIN';
cell3.innerHTML = 50;

table {
  border-collapse: collapse;
}

td, th {
  border: 1px solid #000;
  padding: 10px;
}

<table id="myTable">
    <thead>
        <tr>
            <th>ID</th>
            <th>NAME</th>
            <th>AGE</th>
        </tr>    
     </thead>
    <tbody></tbody>
</table>

Peter Mortensen · Accepted Answer · 2019-11-19 13:02:35Z

Add rows:

<html>
    <script>
        function addRow() {
            var table = document.getElementById('myTable');
            //var row = document.getElementById("myTable");
            var x = table.insertRow(0);
            var e = table.rows.length-1;
            var l = table.rows[e].cells.length;
            //x.innerHTML = "&nbsp;";

            for (var c=0, m=l; c < m; c++) {
                table.rows[0].insertCell(c);
                table.rows[0].cells[c].innerHTML = "&nbsp;&nbsp;";
            }
        }

        function addColumn() {
            var table = document.getElementById('myTable');
            for (var r = 0, n = table.rows.length; r < n; r++) {
                table.rows[r].insertCell(0);
                table.rows[r].cells[0].innerHTML = "&nbsp;&nbsp;";
            }
        }

        function deleteRow() {
            document.getElementById("myTable").deleteRow(0);
        }

        function deleteColumn() {
            // var row = document.getElementById("myRow");
            var table = document.getElementById('myTable');
            for (var r = 0, n = table.rows.length; r < n; r++) {
                table.rows[r].deleteCell(0); // var table handle
            }
        }
    </script>

    <body>
        <input type="button" value="row +" onClick="addRow()" border=0 style='cursor:hand'>
        <input type="button" value="row -" onClick='deleteRow()' border=0 style='cursor:hand'>
        <input type="button" value="column +" onClick="addColumn()" border=0 style='cursor:hand'>
        <input type="button" value="column -" onClick='deleteColumn()' border=0 style='cursor:hand'>

        <table  id='myTable' border=1 cellpadding=0 cellspacing=0>
            <tr id='myRow'>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
            </tr>
            <tr>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
                <td>&nbsp;</td>
            </tr>
        </table>
    </body>
</html>

And cells.

I think you should use more sensible variables when creating an example.

Zel · Accepted Answer · 2021-10-16 18:57:58Z

6

You can also use querySelector to select the tbody, then insert a new row at the end of it.

Use append to insert Node or DOMString objects to a new cell, which will then be inserted into the new row.

var myTbody = document.querySelector("#myTable>tbody");
var newRow = myTbody.insertRow();
newRow.insertCell().append("New data");

<table id="myTable">
  <thead>
    <tr>
      <th>My Header</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Data</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>My footer</td>
    </tr>
  </tfoot>
</table>

answered Oct 16, 2021 at 18:57

Zel

3816 silver badges5 bronze badges

Comments

Siddhartha Mahato · Accepted Answer · 2020-10-05 04:17:57Z

Add Column, Add Row, Delete Column, Delete Row. Simplest way

    function addColumn(myTable) {
      var table = document.getElementById(myTable);
      var row = table.getElementsByTagName('tr');
      for(i=0;i<row.length;i++){
        row[i].innerHTML = row[i].innerHTML + '<td></td>';
      }
    }
    function deleterow(tblId)
    {
        
      var table = document.getElementById(tblId);
      var row = table.getElementsByTagName('tr');
            if(row.length!='1'){
                row[row.length - 1].outerHTML='';
            }
    }
    function deleteColumn(tblId)
    {
        var allRows = document.getElementById(tblId).rows;
        for (var i=0; i<allRows.length; i++) {
            if (allRows[i].cells.length > 1) {
                allRows[i].deleteCell(-1);
            }
        }
    }
    function myFunction(myTable) {
      var table = document.getElementById(myTable);
      var row = table.getElementsByTagName('tr');
      var row = row[row.length-1].outerHTML;
      table.innerHTML = table.innerHTML + row;
      var row = table.getElementsByTagName('tr');
      var row = row[row.length-1].getElementsByTagName('td');
      for(i=0;i<row.length;i++){
        row[i].innerHTML = '';
      }
    }

    table, td {
      border: 1px solid black;
      border-collapse:collapse;
    }
    td {
      cursor:text;
      padding:10px;
    }
    td:empty:after{
      content:"Type here...";
      color:#cccccc;
    }

   <!DOCTYPE html>
    <html>
    <head>
    </head>
    <body>
    <form>
    <p>
    <input type="button" value="+Column" onclick="addColumn('tblSample')">
    <input type="button" value="-Column" onclick="deleteColumn('tblSample')">
    <input type="button" value="+Row" onclick="myFunction('tblSample')">
    <input type="button" value="-Row" onclick="deleterow('tblSample')">
    </p>
    <table id="tblSample" contenteditable><tr><td></td></tr></table>
    </form>

    </body>
    </html>

Peter Mortensen · Accepted Answer · 2019-11-19 12:57:25Z

2

I have tried this, and this is working for me:

var table = document.getElementById("myTable");
var row = table.insertRow(myTable.rows.length-2);
var cell1 = row.insertCell(0);

edited Nov 19, 2019 at 12:57

Peter Mortensen

31.4k22 gold badges110 silver badges134 bronze badges

answered Aug 20, 2013 at 11:23

Pandiyan Cool

6,5838 gold badges53 silver badges90 bronze badges

3 Comments

Jérôme Verstrynge Over a year ago

And what if the footer has 2 rows?

Pandiyan Cool Over a year ago

Ok simple make it as var row=table.insertRow(0); it will add row at top

Déjà vu Over a year ago

@JVerstry tbody: this is exactly what does mozilla

Peter Mortensen · Accepted Answer · 2019-11-19 13:18:26Z

You can use the following example:

<table id="purches">
    <thead>
        <tr>
            <th>ID</th>
            <th>Transaction Date</th>
            <th>Category</th>
            <th>Transaction Amount</th>
            <th>Offer</th>
        </tr>
    </thead>

    <!--  <tr th:each="person: ${list}"    >
            <td><li th:each="person: ${list}" th:text="|${person.description}|"></li></td>
            <td><li th:each="person: ${list}" th:text="|${person.price}|"></li></td>
            <td><li th:each="person: ${list}" th:text="|${person.available}|"></li></td>
            <td><li th:each="person: ${list}" th:text="|${person.from}|"></li></td>
            </tr>
    -->

    <tbody id="feedback">
    </tbody>
</table>

JavaScript file:

$.ajax({
    type: "POST",
    contentType: "application/json",
    url: "/search",
    data: JSON.stringify(search),
    dataType: 'json',
    cache: false,
    timeout: 600000,
    success: function (data) {
        //  var json = "<h4>Ajax Response</h4><pre>"  + JSON.stringify(data, null, 4) + "</pre>";
        // $('#feedback').html(json);
        //
        console.log("SUCCESS: ", data);
        //$("#btn-search").prop("disabled", false);

        for (var i = 0; i < data.length; i++) {
            //$("#feedback").append('<tr><td>' + data[i].accountNumber + '</td><td>' + data[i].category + '</td><td>' + data[i].ssn + '</td></tr>');
            $('#feedback').append('<tr><td>' + data[i].accountNumber + '</td><td>' + data[i].category + '</td><td>' + data[i].ssn + '</td><td>' + data[i].ssn + '</td><td>' + data[i].ssn + '</td></tr>');

            alert(data[i].accountNumber)
        }
    },
    error: function (e) {
        var json = "<h4>Ajax Response</h4><pre>" + e.responseText + "</pre>";
        $('#feedback').html(json);

        console.log("ERROR: ", e);
        $("#btn-search").prop("disabled", false);
    }
});

user2587656 · Accepted Answer · 2024-11-26 13:27:41Z

2

My favorite approach works with outerHTML:

var table = document.getElementById("myTable");
var newrow = table.tBodies[0].insertRow();
newrow.outerHTML = "<tr><td>aaaa</td><td>bbb</td></tr>";

This way you can insert complex rows with several cells and within the cells html elements like fields and buttons.

answered Nov 26, 2024 at 13:27

user2587656

4454 silver badges7 bronze badges

Comments

adB · Accepted Answer · 2021-04-08 22:08:47Z

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="stylesheet" type="text/css" href="css/style.css" />
    <title>Expense Tracker</title>
  </head>
  <body>
    <h1>Expense Tracker</h1>

    <div id="myDiv">
      <label for="name">Name:</label>
      <input
        type="text"
        name="myInput"
        id="myInput"
        placeholder="Name of expense"
        size="50"
      /><br /><br />
      <label for="date">Date:</label>
      <input type="date" id="myDate" name="myDate" />
      <label for="amount">Amount:</label>
      <input
        type="text"
        name="myAmount"
        id="myAmount"
        placeholder="Dollar amount ($)"
      /><br /><br />
      <span onclick="addRow()" class="addBtn">Add Expense</span>
    </div>
    <br />
    <input type="button" value="Add Rows" onclick="addRows()" />
    <!-- Optional position -->
    <table id="myTable">
      <tr>
        <th>Name</th>
        <th>Date</th>
        <th>Amount</th>
        <th>Delete</th>
      </tr>
      <tr>
        <td>McDonald's</td>
        <td>6/22/2017</td>
        <td>$12.00</td>
        <td>
          <input type="button" value="Delete" onclick="deleteRow(this)" />
        </td>
      </tr>
    </table>

    <script>
      function deleteRow(r) {
        var i = r.parentNode.parentNode.rowIndex;
        document.getElementById("myTable").deleteRow(i);
      }
      function addRows() {
        console.log("add rows");
        document.getElementById("myTable").innerHTML += `<tr>
        <td>McDonald's</td>
        <td>6/22/2017</td>
        <td>$12.00</td>
        <td>
          <input type="button" value="Delete" onclick="deleteRow(this)" />
        </td>
      </tr>`;
      }
    </script>
  </body>
</html>

Teena · Accepted Answer · 2022-12-02 05:41:29Z

0

$("#myTable tbody").append(tablerow);

edited Dec 2, 2022 at 5:41

answered Dec 2, 2022 at 5:37

Teena

11 bronze badge

1 Comment

Community Over a year ago

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center.

Collectives™ on Stack Overflow

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

14 Answers 14

8 Comments

5 Comments

2 Comments

2 Comments

Comments

Comments

1 Comment

Comments

Comments

3 Comments

Comments

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

14 Answers 14

8 Comments

5 Comments

2 Comments

2 Comments

Comments

Comments

1 Comment

Comments

Comments

3 Comments

Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related