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