How to add table row in javascript or jQuery?
Assume that below is your HTML table.
<table id="myTable">
<tbody>
<tr><td>Col0</td><td>Col0</td></tr>
</tbody>
</table>
or
<table id="myTable">
</table>
Add row dynamically in javascript as below:
let _table = document.getElementById("myTable");
var _row = _table.insertRow(_table.rows.length);
// Insert New Column for Row at index '0'.
var rowCol1 = _row.insertCell(0);
row1col1.innerHTML = 'Col1';
// Insert New Column for Row at index '1'.
var rowCol2 = _row.insertCell(1);
row1col2.innerHTML = 'Col2';
Add row dynamically in jQuery as below:
$('#myTable').append('<tr><td>Col1</td><td>Col2</td></tr>');
Demo: https://jsbin.com/fejificoqo/1/edit?html,output
-
CreatedJan 16, 2020
-
UpdatedNov 03, 2020
-
Views1,430
Related Articles
Check/Uncheck checkboxes when parent checkbox is checked/unchecked and vice-versa in Java Script
Set DropDownList value based on text/value in Java Script
Get selected text/value from DropDownList (or) Select in Java Script
Get selected index from DropDownList (or) Select in Java Script
How to validate number in Java Script
How to add or remove rows dynamically to HTML Table in Java Script
How to create HTML Table dynamically in Java Script
How to get or set value of a textbox in Java Script
How to get Key Codes in Java Script
How to replace string in Java Script?