Download our latest MNC Answers Application at Play Store. Download Now

Jquery Hands-Ons [Web Technology > Jquery] | Accenture TFA Training Pre-Learning Modules



Disclaimer: The primary purpose of providing this solution is to assist and support anyone who are unable to complete these courses due to a technical issue or a lack of expertise. This website's information or data are solely for the purpose of knowledge and education.

Make an effort to understand these solutions and apply them to your Hands-On difficulties. (It is not advisable that copy and paste these solutions).

All Question of the Hands-On Present Below for Ease Use Ctrl + F with the question name to find the Question. All the Best!


1.Check Box Using JQuery

  1. chkbox.html

<!DOCTYPE html>
<!-- DO NOT ALTER THIS FILE -->
<html lang="en">
<head>
<title>Check Box using jQuery</title>
</head>
<body>
<form id="form">
<input type="checkbox" id="red" name="red" value="Red"/>Red
<input type="checkbox" id="green" name="green" value="Green"/>Green
<input type="checkbox" id="blue" name="blue" value=" Blue"/>Blue
<input type="checkbox" id="black" name="black" value="Black"/>Black<br/>
</form>
<div id="result">0 boxes are checked</div>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="chkbox.js"></script>
</body>

</html>
     
    2.chkbox.js
//WRITE YOUR jQUERY CODE HERE

    $("input[type='checkbox']").click(function(){
        var count=0;
        count=$("input:checked").length;
        if(count==1)
        {
            $("#result").text(count+" box is checked");
        }
        else
        $("#result").text(count+" boxes are checked");
    });

2.Customer Data
  1. 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>
<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>