UncleCoder.com

UncleCoder.com

Free programming examples and instructions

jQuery Adding rows to table

Code and Demo for How to add rows to table in jQuery

by Athil


Posted on 25 May 2017 Category: jQuery Views: 1277

Edited on 06 Aug 2017


DEMO

HI, here I am showing how to add rows dynamically to table using jQuery append() method. Here I added code to add rows for 3 columns NAME, EMAIL, PHONENUMBER. 



$('#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>');

 

Full Code

<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>
    
      <script>
      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>');
    
      }
      </script>
      </body>

  

</html>

RELATED POSTS

Remove rows from html table

 

 



Leave a Comment:


Advertisement