UncleCoder.com

UncleCoder.com

Free programming examples and instructions

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: 30

Edited on 26 Jul 2019


Here I am going to show how to add rows to HTML Table using JQuery.

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"> 
        <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



Leave a Comment: