Scenario: Whenever user enters Salary as 0, we want to set value as "Not in Payroll" on hitting "Process" button. Consider below code-snippets for achieving this requirement using jQuery

OUTPUT:

Here in this scenario based code I have taken 7 rows and 3 columns and accordingly I have created the table and the first row is the heading. So, let me explain the below code.

STEP 1: In body firstly I have open one paragraph tag where I have written the scenario based question " Scenario: Whenever user enters Salary as 0, we want to set value as "Not in Payroll" on hitting "Process" button. Consider below code-snippets for achieving this requirement." and to make the heading bold I have used one <strong> tag and the function of this <strong> tag in HTML is to make the heading or paragraph bold.

STEP 2: I have opened one table tag and in table tag I have provided border="5px" cellpadding="5px" cellspacing="0px". But it's totally depending upon you whether you want to provide any border or not in your table or whether you want to provide any cellpadding or cellspacing in your table or not.

STEP 3: I have opened table body tag and after that I have taken one table row (<tr>) tag where I have kept EmpNo, Name & Salary in heading and for keeping EmpNo, Name & Salary in heading I have taken 3 <th> (table heading) tag where I have kept rowspan=1 because each heading is in each row like EmpNo is in one row, Name is in one row and Salary is in one row.

STEP 4: From second table row (<tr>) tag to seventh table row (<tr>) tag I have provided the data (employee no., name and salary) of six employees and as employee no., name and salary are the data so I have kept the employee no., name and salary in table data (<td>) tag and in each table row and in table data I have taken taken rowspan = 1 as because each data is in each single row. Here I have kept the background color 2nd row 3rd column (Salary) of (EmpNo - 1001) to green (bgcolor="green") whereas from 3rd row to last row 3rd column (Salary) from (EmpNo - 1002) to (EmpNo - 1006) I have kept the background color to red (bgcolor="red").

STEP 5: Here I have kept (EmpNo - 1001) salary fixed i.e. 40000 in second table row (<tr>) tag, so I haven't taken the salary data as input type and value in second table row (<tr>) tag, but from 3rd row to seventh row i.e. from (EmpNo - 1002) to (EmpNo - 1006) I have used input type="text" and value="0" and reason for using input type="text" is that the value ="0" will change to value="Not in Payroll" once we click on the "Process" button and after using the jQuery function and after that the table body tag and table tag will be closed.

STEP 6: After that I have taken one button and inside button tag I have taken one id name as button but you can take any id name and in button tag I have kept "Process".

STEP 7: After that I have used jQuery function. But before using jQuery function we need to copy the jQuery CDN path from w3schools (<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>).

STEP 8: Then I have open the styling of javascript <script type="text/javascript">.

STEP 9: In jQuery the first line of the code which we need to write in every jQuery function is "$(document).ready(function() { "which ensures that the HTML structure is fully loaded before running/executing the jQuery code.

STEP 10: In next line this function "$("#button").click(function() {" explains that once we click on the button Purpose whose id is button it will check and update salaries of 6 employees.

STEP 11: In next line this function "$("input[type='text']").each (function () { " explains that it selects all input fields or input elements of input type text of Salary rows starting from (EmpNo - 1002) to (EmpNo - 1006) in the table except (EmpNo - 1001) as I have permanently set the salary value for (EmpNo - 1001) to 40000 and I don't want to change the salary value from 40000 to "Not in Payroll" without using input type text.

STEP 12: In the next line "if ($(this).val() == '0') {" this function checks the if condition that is it checks and verifies that if the current value of the salary is 0 then only it will update the salary value from "0" to "Not in Payroll" and $(this) functions basically retrieves the current value.

STEP 13: In the last line of this jQuery function "$(this).val('Not in Payroll');" it finally updates the salary value to "Not in Payroll" after checking the if condition.

Code:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1">

<title>Scenario</title>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

<script type="text/javascript">

$(document).ready(function() {

$("#button").click(function() {

$("input[type='text']").each (function () {

if ($(this).val() == '0') {

$(this).val('Not in Payroll');

}

})

</script>

</head>

<body>

<p><strong>Scenario: Whenever user enters Salary as 0, we want to set value as "Not in Payroll" on hitting "Process" button. Consider below code-snippets for achieving this requirement.</strong></p>

<table border="5px" cellpadding="5px" cellspacing="0px">

<tbody>

<tr>

<th rowspan="1">EmpNo</th>

<th rowspan="1">Name</th>

<th rowspan="1">Salary</th>

</tr>

<tr>

<td rowspan="1">1001</td>

<td rowspan="1">Gargi Pramanik</td>

<td rowspan="1" bgcolor="green">40000</td>

</tr>

<tr>

<td rowspan="1">1002</td>

<td rowspan="1">Parnashri Das Adhikari</td>