Customer Data in jQuery

Question:

Create a web page which contains two text boxes to get the name and email address of the customers. When you click ‘Add Customer Details ‘button, the entered data get append 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’

Sample Page:

Quiz for Exam - Customer Data

Code:

customer.html

<!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>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="customer.js"></script>
</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>

</body> 
</html>  

customer.js

$(document).ready(function(){
    $(".add-row").click(function(){
        var name = $("#name").val();
        var markup = "<tr><td><input type='checkbox'name='record'></td><td>" + name + "</td></tr>";
        $("table tbody").append(markup);
    });
$(".delete-row").click(function(){
    $("table tbody").find('input[name="record"]').each(function(){ 
        if($(this).is(":checked")){
            $(this).parents("tr").remove();
}
    
});
    
});
});

Recommended:

1 thought on “Customer Data in jQuery”

  1. I’ve learn a few excellent stuff here. Certainly value bookmarking for revisiting.
    I surprise how so much effort you put to make this type of wonderful
    informative website.

Leave a Comment

Your email address will not be published. Required fields are marked *