Customer Data in jQuery


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:



<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">
<title>jQuery Add / Remove Table Rows Dynamically</title>
<style type="text/css">
        margin: 20px 0;
    form input, button{
        padding: 5px;
        width: 40%;
        margin-bottom: 20px;
	border-collapse: collapse;
    table, th, td{
        border: 1px solid #cdcdcd;
    table th, table td{
        padding: 10px;
        text-align: left;
<script src=""></script>
<script src="customer.js"></script>
    <form id="frm">
        Name: <input type="text" id="name" placeholder="Name">
       	<input type="button" class="add-row" value="Add Customer Details">
                <td><input type="checkbox" name="record"></td>
                <td>Esther Saradha</td>
    <button type="button" class="delete-row">Delete Customer Details</button>


        var name = $("#name").val();
        var markup = "<tr><td><input type='checkbox'name='record'></td><td>" + name + "</td></tr>";
        $("table tbody").append(markup);
    $("table tbody").find('input[name="record"]').each(function(){

  1. Three Division
  2. Check Box Using JQuery
  3. Drag an Object
Sharing Is Caring

Leave a Comment