×
FREE ASSISTANCE FOR THE INQUISITIVE PEOPLE
Tutorial Topics
X
softetechnologies
Load a form by click on html table data
Add a row in a html table using JavaScript and JQuery - Java Script Advance
760    Arnab De    23/08/2020

Add a row in a html table using JavaScript and JQuery

Get the data from a html table and create a row and add that row in an existing html table with a button click. Here we use bootstrap 4.5 for design the page and Java Script and JQuery for set the new row in an existing HTML table.

softetechnologies
<!DOCTYPE html>
<html>
 <head>
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="stylesheet" href="bootstrap.css">
 </head>
 <body>
   <main>
     <div class="container-fluid">
        <div class="row">
          <div class="col-md-6">
             <table class="table">
                <thead>
                  <tr>
                    <th>Name</th>
                    <th>Address</th>
                    <th>Phone No</th>
                    <th>EMail</th>
                  </tr>
                </thead>
                <tbody>
                 <tr>
                    <td>Kanchan kumari</td>
                    <td>Ballygunge Kolkata</td>
                    <td>9865955550</td>
                    <td>kanchankumari@gmail.com</td>
                  </tr>
                  <tr>
                    <td>Rachna singh</td>
                    <td>Ballygunge Kolkata</td>
                    <td>9862222998</td>
                    <td>rachna34@gamil.com</td>
                  </tr>
                  <tr>
                    <td>Priya Pandey</td>
                    <td>Varanashi U.P</td>
                    <td>9865234550</td>
                    <td>varanashi@gmail.com</td>
                  </tr>
                  <tr>
                    <td>Kanchan kumari</td>
                    <td>Varanashi U.P</td>
                    <td>9865955550</td>
                    <td>varanashi2@gmail.com</td>
                  </tr>
               </tbody>
             </table>
           </div> 
           <div class="col-md-6">
             <form>
               <div class="form-group">
                 <label for="sname">NAME</label>
                 <input type="text" class="form-control" id="sname" placeholder="name">
               </div> 
                <div class="form-group">
                 <label for="sadd">ADDRESS</label>
                 <select class="form-control" id="sadd">
                  <option value="Ballygunge Kolkata">Ballygunge Kolkata</option>
                  <option value="Damdam Kolkata">Damdam Kolkata</option>
                  <option value="Varanashi U.P">Varanashi U.P</option>
                  <option value="Varanashi U.P">Varanashi U.P</option> 
                 </select>
               </div> 
               <div class="form-group">
                 <label for="cno">PHONE NO</label>
                 <input type="number" class="form-control" id="cno"
               </div> 
               <div class="form-group">
                 <label for="cemail">E-MAIL ID</label>
                 <input type="text" class="form-control" id="cemail">
                </div>
                <button type="button" id="mybtn" class="btn btn-primary">Add</button>
             </form>
           </div> 
         </div>
       </div>
     </section>
   </main>
   <script src="jquery.js"></script>
   <script src="popper.min.js"></script>
   <script src="bootstrap.js"></script>
   <script>
      $(document).ready(function(){
               $("#mybtn").click(function(){
                  msg="<tr>
				    <td>" + $("#sname").val() + "</td>
				    <td>" + $("#sadd").val() + "</td>
				    <td>" + $("#cno").val() + "</td>
				    <td>" + $("#cemail").val() + "</td> 
				  </tr>";  
                  $("#tab-data").append(msg); });
                  });
    </script>
  </body>
</html>
softetechnologies
Load a form by click on html table data
softetechnologies
Author Details
Arnab De
I have over 16 years of experience working as an IT professional, ranging from teaching at my own institute to being a computer faculty at different leading institute across Kolkata. I also work as a web developer and designer, having worked for renowned companies and brand. Through tutorialathome, I wish to share my years of knowledge with the readers.
Enter New Comment
Comment History
No Comment Found Yet.
Rabindranath Tagore
Every child comes with the message that God is not yet discouraged of man.
Rabindranath Tagore
3314
34.08
Today So Far
Total View (Lakh)
softetechnologies
01/01/2018     33580
28/06/2017     29498
02/08/2017     26982
26/05/2018     26935
15/05/2017     23200
06/07/2017     21670
01/08/2017     21288
25/06/2018     20035
21/04/2018     18610
14/07/2017     16436
softetechnologies