Adding a table row in jQuery

Question

I'm using jQuery to add an additional row to a table as the last row.

I have done it this way:

$('#myTable').append('my datamore data');

Are there limitations to what you can add to a table like this (such as inputs, selects, number of rows)? Is there a different way to do it?

user_17602 · Answer

The approach you suggest is not guaranteed to give you the result you're looking for - what if you had a tbody for example:

......

You would end up with the following:

.........

I would therefore recommend this approach instead:

$('#myTable tr:last').after('......');

You can include anything within the after() method as long as it's valid HTML, including multiple rows as per the example above.

Update: Revisiting this answer following recent activity with this question. eyelidlessness makes a good comment that there will always be a tbody in the DOM; this is true, but only if there is at least one row. If you have no rows, there will be no tbody unless you have specified one yourself.

DaRKoN_ suggests appending to the tbody rather than adding content after the last tr. This gets around the issue of having no rows, but still isn't bulletproof as you could theoretically have multiple tbody elements and the row would get added to each of them.

Weighing everything up, I'm not sure there is a single one-line solution that accounts for every single possible scenario. You will need to make sure the jQuery code tallies with your markup.

I think the safest solution is probably to ensure your table always includes at least one tbody in your markup, even if it has no rows. On this basis, you can use the following which will work however many rows you have (and also account for multiple tbody elements):

$('#myTable > tbody:last-child').append('......');

DaRKoN__23300 · Answer

What if you had a and a ?

Such as:


    
        Foo
    
    
        footer information

Then it would insert your new row in the footer - not to the body.

Hence the best solution is to include a tag and use .append, rather than .after.

$("#myTable > tbody").append("row content");

user_69542 · Answer

This can be done easily using the "last()" function of jQuery.

$("#tableId").last().append("New row");

user_7386332 · Answer

I solved it this way.

Using jquery

$('#tab').append($('')
    .append($('').append("text1"))
    .append($('').append("text2"))
    .append($('').append("text3"))
    .append($('').append("text4"))
  )

Snippet

$('#tab').append($('')
  .append($('').append("text1"))
  .append($('').append("text2"))
  .append($('').append("text3"))
  .append($('').append("text4"))
)




  
    Firstname
    Lastname 
    Age
    City
  
  
    Jill
    Smith 
    50
    New York

user_544311 · Answer

I'm using this way when there is not any row in the table, as well as, each row is quite complicated.

style.css:

...
#templateRow {
  display:none;
}
...

xxx.html

...
 ... 
...

$("#templateRow").clone().removeAttr("id").appendTo( $("#templateRow").parent() );

...

user_585079 · Answer

For the best solution posted here, if there's a nested table on the last row, the new row will be added to the nested table instead of the main table. A quick solution (considering tables with/without tbody and tables with nested tables):

function add_new_row(table, rowcontent) {
    if ($(table).length > 0) {
        if ($(table + ' > tbody').length == 0) $(table).append('');
        ($(table + ' > tr').length > 0) ? $(table).children('tbody:last').children('tr:last').append(rowcontent): $(table).children('tbody:last').append(rowcontent);
    }
}

Usage example:

add_new_row('#myTable','my new row');

Uzbekjon_52317 · Answer

You can use this great jQuery add table row function. It works great with tables that have and that don't. Also it takes into the consideration the colspan of your last table row.

Here is an example usage:

// One table
addTableRow($('#myTable'));
// add table row to number of tables
addTableRow($('.myTables'));

user_441914 · Answer

My solution:

//Adds a new table row
$.fn.addNewRow = function (rowId) {
    $(this).find('tbody').append(' ');
};

usage:

$('#Table').addNewRow(id1);

user_5906922 · Answer

if you have another variable you can access in tag like that try.

This way I hope it would be helpful

var table = $('#yourTableId');
var text  = 'My Data in td';
var image = 'your/image.jpg'; 
var tr = (
  '' +
    ''+ text +''+
    ''+ text +''+
    ''+
      ''+
    ''+
  ''
);

$('#yourTableId').append(tr);

user_454137 · Answer

You can cache the footer variable and reduce access to DOM (Note: may be it will be better to use a fake row instead of footer).

var footer = $("#mytable tfoot")
footer.before("")

user_6777209 · Answer

Try this : very simple way

$('34').appendTo("#myTable tbody");



  
    1
    2

user_4964569 · Answer

The answers above are very helpful, but when student refer this link to add data from form they often require a sample.

I want to contribute an sample get input from from and use .after() to insert tr to table using string interpolation.

function add(){
  let studentname = $("input[name='studentname']").val();
  let studentmark = $("input[name='studentmark']").val();

  $('#student tr:last').after(`${studentname}${studentmark}`);
}

function add(){
let studentname = $("input[name='studentname']").val();
let studentmark = $("input[name='studentmark']").val();

$('#student tr:last').after(`${studentname}${studentmark}`);
}














  
    Name
    Mark

user_510754 · Answer

I have tried the most upvoted one, but it did not work for me, but below works well.

$('#mytable tr').last().after('');

Which will work even there is a tobdy there.

user_9885904 · Answer

)Daryl:

You can append it to the tbody using the appendTo method like this:

$(() => {
   $("my datamore data").appendTo("tbody");
});

You'll probably want to use the latest JQuery and ECMAScript. Then you can use a back-end language to add your data to the table. You can also wrap it in a variable like so:

$(() => {
  var t_data = $('my datamore data');
  t_data.appendTo('tbody');
});

user_8625811 · Answer

Add tabe row using JQuery:

if you want to add row after last of table's row child, you can try this

$('#myTable tr:last').after('......');

if you want to add row 1st of table's row child, you can try this

$('#myTable tr').after('......');

user_860099 · Answer

Pure JS is quite short in your case

myTable.firstChild.innerHTML += 'my datamore data'

function add() {
  myTable.firstChild.innerHTML+=`date${+new Date}`
}

td {border: 1px solid black;}

(if we remove and firstChild it will also works but wrap every row with )

user_14229690 · Answer

Try This:

// Using jQuery - append
$('#myTable > tbody').append('3Smith Patel');

// Using jQuery - appendTo
$('4J. Thomson').appendTo("#myTable > tbody");

// Using jQuery - add html row
let tBodyHtml = $('#myTable > tbody').html();
tBodyHtml += '5Patel S.';
$('#myTable > tbody').html(tBodyHtml);

// Using jQuery - after
$('#myTable > tbody tr:last').after('6Angel Bruice');

// Using JavaScript - insertRow
const tableBody = document.getElementById('myTable').getElementsByTagName('tbody')[0];
const newRow = tableBody.insertRow(tableBody.rows.length);
newRow.innerHTML = '7K. Ashwin';

user_9578153 · Answer

To add a new row at the last of current row, you can use like this

$('#yourtableid tr:last').after('......');

You can append multiple row as above. Also you can add inner data as like

$('#yourtableid tr:last').after('your data');

in another way you can do like this

let table = document.getElementById("tableId");

let row = table.insertRow(1); // pass position where you want to add a new row


//then add cells as you want with index
let cell0 = row.insertCell(0);
let cell1 = row.insertCell(1);
let cell2 = row.insertCell(2);
let cell3 = row.insertCell(3);


//add value to added td cell
 cell0.innerHTML = "your td content here";
 cell1.innerHTML = "your td content here";
 cell2.innerHTML = "your td content here";
 cell3.innerHTML = "your td content here";

user_12688471 · Answer

Here, You can Just Click on button then you will get Output. When You Click on Add row button then one more row Added.

I hope It is very helpful.

 

 
     

     
 

 

    Add table row in jQuery 

     
        Click on the button below to 
        add a row to the table 
     

     

     
         
             
                Rows 
             
         
         
             
                This is row 0

user_7950428 · Answer

var html = $('#myTableBody').html();
html += 'my datamore data';
$('#myTableBody').html(html);

or

$('#myTableBody').html($('#myTableBody').html() + 'my datamore data');

user_9881249 · Answer

TIP: Inserting rows in html table via innerHTML or .html() is not valid in some browsers (similar IE9), and using .append("") is not good suggestion in any browser. best and fastest way is using the pure javascript codes.

for combine this way with jQuery, only add new plugin similar this to jQuery:

$.fn.addRow=function(index/*-1: add to end  or  any desired index*/, cellsCount/*optional*/){
    if(this[0].tagName.toLowerCase()!="table") return null;
    var i=0, c, r = this[0].insertRow((index<0||index>this[0].rows.length)?this[0].rows.length:index);
    for(;i



And now use it in whole the project similar this:

var addedRow = $("#myTable").addRow(-1/*add to end*/, 2);

Adding a table row in jQuery

42 Answers

Snippet