Adding rows to HTML table - Jquery
Demo and code for how to add rows to HTML table using jQuery
by Athil
Posted on 27 Jun 2018 Category: jQuery
Views: 2406
Here I am going to show how to add rows to HTML Table using JQuery.
DEMO
DOWNLOAD DEMO
function addrows()
{
$('#tblid > tbody:last-child').append(
'<tr>'
+'<td>'+document.getElementById('txtName').value+'</td>'
+'<td>'+document.getElementById('txtEmail').value+'</td>'
+'<td>'+document.getElementById('txtPhonenUmber').value+'</td>'
+'</tr>');
}
Where 'tblid' is the table ID containing three columns with Name, Address, Age.
In the demo There three text boxes with Id 'txtname' for to add rows in name column , 'txtEmail' text box for ading value in Email and 'TxtPhonenUmber' for Phonenumber.
Full Demo code (HTML)
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Demo for aading rows to table using jQuery</title>
</head>
<body>
<script type="text/javascript" src="js/jquery.min.js" ></script>
<h1>Demo for adding rows to html table using jQuery </h1>
<label>Name</label><input id="txtName" value="name3" type="text"> </input><br/>
<label>Email</label><input id="txtEmail" value="[email protected]" type="text"></input><br/>
<label>Phone Number</label> <input id="txtPhonenUmber" value="3456789012" type="text" />
<button type="submit" onclick="addrows();" >Add row </button>
<table id="tblid" border = "1">
<tr>
<th>Name </th><th>Email</th><th>Phone Number</th></tr>
<tbody> <tr><td>Name1</th><th>[email protected] </td><td>1234567890 </td> </tr>
<tr><td>Name2</td><td>[email protected] </td><td>2345678901 </td> </tr>
</tbody>
<!-- I want to insert new rows here -->
</table>
</body>
</html>
Javascript
function addrows()
{
$('#tblid > tbody:last-child').append(
'<tr>'
+'<td>'+document.getElementById('txtName').value+'</td>'
+'<td>'+document.getElementById('txtEmail').value+'</td>'
+'<td>'+document.getElementById('txtPhonenUmber').value+'</td>'
+'</tr>');
}
Related Articles
export HTML table to excel - Javascript
Import CSV to HTML Table - jQuery
Removing rows from HTML table - jQuery