×
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
681    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.
Swami Vivekananda
Truth can be stated in a thousand different ways, yet each one can be true.
Swami Vivekananda
2982
34.08
Today So Far
Total View (Lakh)
softetechnologies
01/01/2018     33580
28/06/2017     29496
02/08/2017     26981
26/05/2018     26935
15/05/2017     23199
06/07/2017     21669
01/08/2017     21288
25/06/2018     20034
21/04/2018     18609
14/07/2017     16432
softetechnologies