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

Load a form by click on html table data using Java Script and JQuery

Click on a html table row and read all the data from that row and put it in a corresponding field in an existing html form. Here we use bootstrap 4.5 for design the page and Java Script and JQuery.

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>
       $(".myTable").click(function(){
            var tableData = $(this).children("td").map(function(){return $(this).text();}).get();
            var a=tableData.toString().split(",");
            $("#sname").val(a[0])
            $('#sadd option:contains("' + a[1] + '")').attr('selected','selected');
            $("#cno").val(a[2])
            $("#cemail").val(a[3])
      });
    </script>
  </body>
</html>
softetechnologies
Add a row in a html table using JavaScript and JQuery
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.
Albert Einstein
Education is not the learning of facts, but the training of the mind to think.
Albert Einstein
231
23.83
Today So Far
Total View (Lakh)
softetechnologies
01/01/2018     30778
28/06/2017     25550
02/08/2017     22003
26/05/2018     19715
15/05/2017     19354
06/07/2017     17901
21/04/2018     16863
01/08/2017     16539
01/07/2017     14551
25/04/2018     13616
softetechnologies