Customer Data
Create a web page that contains two text boxes to get the name and email address of the customers. When you click the ‘Add Customer Details ‘button, the entered data get appended to the table below that and when you click the ‘Delete Customer Details’ button, the selected row/rows in the table (using check box) should get deleted dynamically using jQuery.
Hint: You can use the jQuery .append() method to append or add rows inside a HTML table. Similarly, you can use the .remove() method to remove or delete table rows as well as all everything inside it from the DOM dynamically with jQuery.
Note:
Do not alter the given 'customer.html' file. Write your jQuery code in the file 'customer.js'.
Avoid writing the jQuery 'document ready' method for the proper web page visibility.
Do not use 'ES6' features.
Solution:
customer.html
<!-- DO NOT CHANGE THIS FILE -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Add / Remove Table Rows Dynamically</title>
<style type="text/css">
form{
margin: 20px 0;
}
form input, button{
padding: 5px;
}
table{
width: 40%;
margin-bottom: 20px;
border-collapse: collapse;
}
table, th, td{
border: 1px solid #cdcdcd;
}
table th, table td{
padding: 10px;
text-align: left;
}
</style>
</head>
<body>
<form id="frm">
Name: <input type="text" id="name" placeholder="Name">
<input type="button" class="add-row" value="Add Customer Details">
<table>
<thead>
<tr>
<th>Select</th>
<th>Name</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" name="record"></td>
<td>Esther Saradha</td>
</tr>
</tbody>
</table>
<button type="button" class="delete-row">Delete Customer Details</button>
</form>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="customer.js"></script>
</body>
</html>
customer.js
$(document).ready(function(){
$('.add-row').click(function(){
var name=$('#name').val().trim();
var row='<input type="checkbox">';
var text="<tr><td>"+row+"</td>"+"<td>"+name+"</td></tr>";
$('tbody').append(text);
})
$('.delete-row').click(function(){
$('tr').each(function(){
var isChecked=$(this).find('input[type="checkbox"]').is(":checked");
if(isChecked){
$(this).remove();
}
})
})
})
