I'm using jQuery to add an additional row to a table as the last row.
I have done it this way:
$('#myTable').append('<tr><td>my data</td><td>more data</td></tr>'); 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?
Try this : very simple way
$('<tr><td>3</td></tr><tr><td>4</td></tr>').appendTo("#myTable tbody");<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <table id="myTable"> <tbody> <tr><td>1</td></tr> <tr><td>2</td></tr> </tbody> </table>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(`<tr><td>${studentname}</td><td>${studentmark}</td></tr>`); } function add(){ let studentname = $("input[name='studentname']").val(); let studentmark = $("input[name='studentmark']").val(); $('#student tr:last').after(`<tr><td>${studentname}</td><td>${studentmark}</td></tr>`); }<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <!DOCTYPE html> <html> <head> <style> table { font-family: arial, sans-serif; border-collapse: collapse; width: 100%; } td, th { border: 1px solid #dddddd; text-align: left; padding: 8px; } tr:nth-child(even) { background-color: #dddddd; } </style> </head> <body> <form> <input type='text' name='studentname' /> <input type='text' name='studentmark' /> <input type='button' onclick="add()" value="Add new" /> </form> <table id='student'> <thead> <th>Name</th> <th>Mark</th> </thead> </table> </body> </html>I have tried the most upvoted one, but it did not work for me, but below works well.
$('#mytable tr').last().after('<tr><td></td></tr>'); Which will work even there is a tobdy there.
)Daryl:
You can append it to the tbody using the appendTo method like this:
$(() => { $("<tr><td>my data</td><td>more data</td></tr>").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 = $('<tr><td>my data</td><td>more data</td></tr>'); t_data.appendTo('tbody'); }); Try This:
// Using jQuery - append $('#myTable > tbody').append('<tr><td>3</td><td>Smith Patel</td></tr>'); // Using jQuery - appendTo $('<tr><td>4</td><td>J. Thomson</td></tr>').appendTo("#myTable > tbody"); // Using jQuery - add html row let tBodyHtml = $('#myTable > tbody').html(); tBodyHtml += '<tr><td>5</td><td>Patel S.</td></tr>'; $('#myTable > tbody').html(tBodyHtml); // Using jQuery - after $('#myTable > tbody tr:last').after('<tr><td>6</td><td>Angel Bruice</td></tr>'); // Using JavaScript - insertRow const tableBody = document.getElementById('myTable').getElementsByTagName('tbody')[0]; const newRow = tableBody.insertRow(tableBody.rows.length); newRow.innerHTML = '<tr><td>7</td><td>K. Ashwin</td></tr>';<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table id="myTable"> <thead> <tr> <th>Id</th> <th>Name</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>John Smith</td> </tr> <tr> <td>2</td> <td>Tom Adam</td> </tr> </tbody> </table>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('<tr>...</tr><tr>...</tr>'); if you want to add row 1st of table's row child, you can try this
$('#myTable tr').after('<tr>...</tr><tr>...</tr>'); Pure JS is quite short in your case
myTable.firstChild.innerHTML += '<tr><td>my data</td><td>more data</td></tr>' function add() { myTable.firstChild.innerHTML+=`<tr><td>date</td><td>${+new Date}</td></tr>` }td {border: 1px solid black;}<button onclick="add()">Add</button><br> <table id="myTable"><tbody></tbody> </table>(if we remove <tbody> and firstChild it will also works but wrap every row with <tbody>)
This could also be done :
$("#myTable > tbody").html($("#myTable > tbody").html()+"<tr><td>my data</td><td>more data</td></tr>") 
To add a new row at the last of current row, you can use like this
$('#yourtableid tr:last').after('<tr>...</tr><tr>...</tr>'); You can append multiple row as above. Also you can add inner data as like
$('#yourtableid tr:last').after('<tr><td>your data</td></tr>'); 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"; 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.
<html> <head> <script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"> </script> <style> table { margin: 25px 0; width: 200px; } table th, table td { padding: 10px; text-align: center; } table, th, td { border: 1px solid; } </style> </head> <body> <b>Add table row in jQuery</b> <p> Click on the button below to add a row to the table </p> <button class="add-row"> Add row </button> <table> <thead> <tr> <th>Rows</th> </tr> </thead> <tbody> <tr> <td>This is row 0</td> </tr> </tbody> </table> <!-- Script to add table row --> <script> let rowno = 1; $(document).ready(function () { $(".add-row").click(function () { rows = "<tr><td>This is row " + rowno + "</td></tr>"; tableBody = $("table tbody"); tableBody.append(rows); rowno++; }); }); </script> </body> </html> 
var html = $('#myTableBody').html(); html += '<tr><td>my data</td><td>more data</td></tr>'; $('#myTableBody').html(html); or
$('#myTableBody').html($('#myTableBody').html() + '<tr><td>my data</td><td>more data</td></tr>'); 
htm from html... Also why take the entire table HTML? Wont this add the new row after say tbody?
TIP: Inserting rows in html table via innerHTML or .html() is not valid in some browsers (similar IE9), and using .append("<tr></tr>") 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<cellsCount||0;i++) c = r.insertCell(); //you can use c for set its content or etc return $(r); }; And now use it in whole the project similar this:
var addedRow = $("#myTable").addRow(-1/*add to end*/, 2); 