FREE ASSISTANCE FOR THE INQUISITIVE PEOPLE
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.
<!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>
