there are two sets of html tables namely 1. Normal Fixation 2. Option Fixation. Each heading having a pair of similar column data.
I need to follow two criteria
In the first case i.e. Normal Fixation, when user inputs any value from Normal Fixation table first column values in the Current Basic (textbox id is cb), first two cell values including search value to be highlighted and the next max value to be highlighted in the second column value.
In the second case i.e. Option Fixation, input value to be searched in the option Fixation table first column upto 3 levels and be highlighted and the 4th max value in the second column to be highlighted.
for example : Choose Current level Option as Level 7, Promotion level option as Level 10. Place the input value in Current Basic as 46200, then 46200, 47600 to be highlighted in the Normal Fixation first column and 56100 to be highlighted in the second column.
Similarly, in the option fixation first column three values i.e. 46200, 47600 and 49000 to be highlighted. the forth max value i.e.56100 to be highlighted in the second column.
<!DOCTYPE html>
<html>
<head>
<title>Option Payfixation Reference Tool</title>
<meta charset="utf-8" name="viewport"
content= "width=device-width, initial-scale=1.0">
<meta name="description" content="Normal Payfixation Calculation Tool (for Level 7 and 10 to 13)">
<style>
.highlight
{
color:red;
background-color:yellow;
font-weight:bold;
}
.highlight2 {
color: white;
background-color:green;
font-weight: bold;
}
.highlight3 {
color: green;
background-color:yellow;
font-weight: bold;
}
#nb {display:none;
}
#dupnb {display:none;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
</head>
<body>
<br><br><br>
<div class="container">
<center><h2>OPTION PAY FIXATION <br>(A REFERENCE TOOL)</h2></center>
<div class="row">
<div class="col-md-3">
</div>
<div class="col-md-6">
<div class="table-responsive-md">
<table class="table" border="0">
<tr>
<td width="250px">Date of Promotion</td><td width="250px"><input class="form-control" type="date" name="dop" id="dop" autocomplete="off" /></td>
</tr>
<tr>
<td>DNI</td><td><select class="form-control" name="dni" id="dni" autocomplete="off">
<option value="0">Select</option>
<option value="1">01st January</option>
<option value="2">01st July</option>
</select></td>
</tr>
<tr>
<td>Current Level</td>
<td>
<select class="form-control" name="cl" id="cl" autocomplete="off">
<option value="0" data-id="">Select</option>
<option value="1" data-id="le7a">Level 7 (GP 4600/-)</option>
<option value="2" data-id="le10a">Level 10 (GP 5400/-)</option>
<option value="3" data-id="le11a">Level 11 (GP 6600/-)</option>
<option value="4" data-id="le12a">Level 12 (GP 7600/-)</option>
<option value="5" data-id="le13a">Level 13 (GP 8700/-)</option>
</select>
</td>
</tr>
<tr>
<td>Promotion in Level</td>
<td>
<select class="form-control" name="pl" id="pl" autocomplete="off">
<option value="0" data-id="">Select</option>
<option value="1" data-id = "le10b">Level 10 (GP 5400/-)</option>
<option value="2" data-id = "le11b">Level 11 (GP 6600/-)</option>
<option value="3" data-id = "le12b">Level 12 (GP 7600/-)</option>
<option value="4" data-id = "le13b">Level 13 (GP 8700/-)</option>
<option value="5" data-id = "le13ab">Level 13A (GP 8900/-)</option>
</select>
</td>
</tr>
<tr>
<td>Current Basic</td>
<td><input class="form-control" type="text" name="cb" id="cb" autocomplete="off"/>
<input class="form-control" type="text" name="dupcb" id="dupcb" autocomplete="off"/>
</td>
</tr>
<tr>
<td>After one increment<br>(in Current Pay Level)</td>
<td><input class="form-control" type="text" name="aftinc" id="aftinc" autocomplete="off" readonly/>
</td>
</tr>
<tr>
<td>After TWO increments<br>(in Current Pay Level)</td>
<td>
<input class="form-control" type="text" name="dupaftinc" id="dupaftinc" autocomplete="off" readonly/>
</td>
</tr>
</table>
</div>
</div>
<div class="row">
<div class="col-md-10">
<table class="table table-responsive table-bordered">
<tr>
<td colspan="2" style="font-weight:bold; text-align:center;">Normal Fixation</td>
<td colspan="1" style="font-weight:bold; text-align:center;"></td>
<td colspan="2" style="font-weight:bold; text-align:center;">Option Fixation</td>
<tr>
<tr>
<th>Current Pay Level</th>
<th>Promotion Pay Level</th>
<th>Pay from <input type="text" id="pf" style="width:100px; border:0; font-weight:bold; color:red;" readonly/></th>
<!--OPTION FIXATION HEADINGS-->
<th>Current Pay Level</th>
<th>Promotion Pay Level</th>
<th>Pay from <input type="text" id="pf" style="width:100px; border:0; font-weight:bold; color:red;" readonly/></th>
</tr>
<tr>
<td id="CPLholder"> </td>
<td id="PPLholder"> </td>
<td><input class="form-control" type="text" name="nb" id="nb" autocomplete="off" readonly/></td>
<!--OPTION FIXATION CONTENT-->
<td id="CPLholder2"> </td>
<td id="PPLholder2"> </td>
<td><input class="form-control" type="text" name="dupnb" id="dupnb" autocomplete="off" readonly/></td>
</tr>
</table>
</div>
</div>
<div class="col-md-3">
</div>
</div>
</div>
<script>
$(document).ready(function(){
$('#dni').on('click', function() {
$('#pf').val($('#dop').val());
if ( this.value == '1')
{
var revDate = new Date($("#dop").val());
var plusOneYear = new Date(revDate.setFullYear(revDate.getFullYear() + 1, revDate.getMonth() - 8));
var revisedate = (new Date(plusOneYear)).toLocaleDateString('en-GB');
document.querySelector("#nid").value = revisedate;
}
else if ( this.value == '2')
{
var revDate = new Date($("#dop").val());
var plusOneYear = new Date(revDate.setFullYear(revDate.getFullYear() + 1, revDate.getMonth() - 2));
var revisedate = (new Date(plusOneYear)).toLocaleDateString('en-GB');
document.querySelector("#nid").value = revisedate;
}
});
});
</script>
<script>
$(document).ready(function() {
$('#cb').keyup(function(e) {
var txtVal = $(this).val();
$('#dupcb').val(txtVal);
});
});
</script>
<script type="text/javascript">
$(function(){
var cplData = {
'le7a' : [44900,46200,47600,49000,50500,52000,53600,55200,56900,58600,60400,62200,64100,66000,68000,70000,72100,74300, 76500,78800,81200,83600,86100,88700,91400,94100,96900,99800],
'le10a' : [56100,57800,59500,61300,63100,65000,67000,69000,71100,73200,75400,77700, 80000, 82400, 84900, 87400, 90000, 92700, 95500, 98400, 101400, 104400, 107500, 110700, 114000, 117400, 120900, 124500],
'le11a' : [67700,69700,71800,74000,76200,78500,80900,83300,85800,88400,91100,93800, 96600, 99500,102500, 105600, 108800, 112100, 115500, 119000, 122600, 126300, 130100, 134000, 138000, 142100, 146400, 150800, 155300],
'le12a' : [78800,81200,83600,86100,88700,91400,94100,96900,99800,102800,105900,109100, 112400, 115800, 119300, 122900, 126600, 130400, 134300, 138300, 142400, 146700, 151100, 155600, 160300, 165100, 170100, 175200, 180500],
'le13a' : [123100,123800,130600,134500,138500,142700,147000,151400,155900,160600,165400,170400, 175500, 180800, 186200, 191800, 197600, 203500, 209600, 215900]
}
var pplData = {
'le10b' : [56100,57800,59500,61300,63100,65000,67000,69000,71100,73200,75400,77700, 80000, 82400, 84900, 87400, 90000, 92700, 95500, 98400, 101400, 104400, 107500, 110700, 114000, 117400, 120900, 124500],
'le11b' : [67700,69700,71800,74000,76200,78500,80900,83300,85800,88400,91100,93800, 96600, 99500,102500, 105600, 108800, 112100, 115500, 119000, 122600, 126300, 130100, 134000, 138000, 142100, 146400, 150800, 155300],
'le12b' : [78800,81200,83600,86100,88700,91400,94100,96900,99800,102800,105900,109100, 112400, 115800, 119300, 122900, 126600, 130400, 134300, 138300, 142400, 146700, 151100, 155600, 160300, 165100, 170100, 175200, 180500],
'le13b' : [123100,123800,130600,134500,138500,142700,147000,151400,155900,160600,165400,170400, 175500, 180800, 186200, 191800, 197600, 203500, 209600, 215900],
'le13ab' : [131100,135000,139100,143300,147600,152000,156600,161300,166100,171100,176200,181500]
}
$('#cl').on('change', function()
{
var dataId = $('option:selected', this).data('id');
$('#cb, #aftinc, #nb').val('');
$('#CPLholder').find('table tr').removeClass('highlight highlight2');
$('#PPLholder').find('table tr').removeClass('highlight3');
if(dataId)
{
$('#CPLholder').html(createTable(dataId,'cpl'));
}
else
{
$('#CPLholder').html('');
}
});
$('#pl').on('change', function()
{
var dataId = $('option:selected', this).data('id');
$('#cb, #aftinc, #nb').val('');
$('#CPLholder').find('table tr').removeClass('highlight highlight2');
$('#PPLholder').find('table tr').removeClass('highlight3');
if(dataId)
{
$('#PPLholder').html(createTable(dataId,'ppl'));
}
else
{
$('#PPLholder').html('');
$('#PPLholder2').html('');
}
});
function createTable(dataId,plType)
{
var table = $('<table id="'+dataId+'" class="table table-responsive">');
var data = (plType == 'cpl') ? cplData[dataId] : pplData[dataId];
$.each(data, function(i, item)
{
table.append('<tr><td>' + item + '</td></tr>');
});
return table;
}
<!--for NORMAL FIXATION HIGHLIGHT - starts-->
$('#cb').on('change keyup', function ()
{
var search = $(this).val();
var activeCPL = $('#'+$('#CPLholder').find('table').attr('id'));
var pplId = $('#PPLholder').find('table').attr('id');
var activePPL = $('#'+pplId);
if(activeCPL != undefined) activeCPL.find('tr').removeClass('highlight highlight2');
$('#aftinc').val('');
if(activePPL != undefined) activePPL.find('tr').removeClass('highlight3');
var aftinc = 0;
activeCPL.find('tr').find('td').each(function()
{
if($(this).text() == search)
{
$(this).parent('tr').addClass('highlight');
$(this).parent('tr').next().addClass('highlight2');
aftinc = $(this).parent('tr').next().text();
$('#aftinc').val(aftinc);
}
});
if(aftinc > 0)
{
var closest = pplData[pplId].reduce((prev, curr) => {
return Math.abs(curr - aftinc) < Math.abs(prev - aftinc) && (curr - aftinc) > 0 ? curr : prev;
});
}
if (closest - aftinc > 0)
{
activePPL.find('tr').find('td').each(function()
{
if (this.innerHTML == closest)
{
$(this).parent('tr').addClass('highlight3');
var nb = $(this).parent('tr').text();
var nnb = $(this).parent('tr').next().text();
$('#nnb').val(nnb);
$('#nb').val(nb);
}
});
}
});
<!--for NORMAL FIXATION HIGHLIGHT - Ends-->
});
</script>
<!---->
<script type="text/javascript">
$(function(){
var cplData = {
'le7a' : [44900,46200,47600,49000,50500,52000,53600,55200,56900,58600,60400,62200,64100,66000,68000,70000,72100,74300, 76500,78800,81200,83600,86100,88700,91400,94100,96900,99800],
'le10a' : [56100,57800,59500,61300,63100,65000,67000,69000,71100,73200,75400,77700, 80000, 82400, 84900, 87400, 90000, 92700, 95500, 98400, 101400, 104400, 107500, 110700, 114000, 117400, 120900, 124500],
'le11a' : [67700,69700,71800,74000,76200,78500,80900,83300,85800,88400,91100,93800, 96600, 99500,102500, 105600, 108800, 112100, 115500, 119000, 122600, 126300, 130100, 134000, 138000, 142100, 146400, 150800, 155300],
'le12a' : [78800,81200,83600,86100,88700,91400,94100,96900,99800,102800,105900,109100, 112400, 115800, 119300, 122900, 126600, 130400, 134300, 138300, 142400, 146700, 151100, 155600, 160300, 165100, 170100, 175200, 180500],
'le13a' : [123100,123800,130600,134500,138500,142700,147000,151400,155900,160600,165400,170400, 175500, 180800, 186200, 191800, 197600, 203500, 209600, 215900]
}
var pplData = {
'le10b' : [56100,57800,59500,61300,63100,65000,67000,69000,71100,73200,75400,77700, 80000, 82400, 84900, 87400, 90000, 92700, 95500, 98400, 101400, 104400, 107500, 110700, 114000, 117400, 120900, 124500],
'le11b' : [67700,69700,71800,74000,76200,78500,80900,83300,85800,88400,91100,93800, 96600, 99500,102500, 105600, 108800, 112100, 115500, 119000, 122600, 126300, 130100, 134000, 138000, 142100, 146400, 150800, 155300],
'le12b' : [78800,81200,83600,86100,88700,91400,94100,96900,99800,102800,105900,109100, 112400, 115800, 119300, 122900, 126600, 130400, 134300, 138300, 142400, 146700, 151100, 155600, 160300, 165100, 170100, 175200, 180500],
'le13b' : [123100,123800,130600,134500,138500,142700,147000,151400,155900,160600,165400,170400, 175500, 180800, 186200, 191800, 197600, 203500, 209600, 215900],
'le13ab' : [131100,135000,139100,143300,147600,152000,156600,161300,166100,171100,176200,181500]
}
$('#cl').on('change', function()
{
var dataId = $('option:selected', this).data('id');
$('#dupcb, #dupaftinc, #dupnb').val('');
$('#CPLholder2').find('table tr').removeClass('highlight highlight2');
$('#PPLholder2').find('table tr').removeClass('highlight3');
if(dataId)
{
$('#CPLholder2').html(createTable(dataId,'cpl'));
}
else
{
$('#CPLholder2').html('');
}
});
$('#pl').on('change', function()
{
var dataId = $('option:selected', this).data('id');
$('#dupcb, #dupaftinc, #dupnb').val('');
$('#CPLholder2').find('table tr').removeClass('highlight highlight2');
$('#PPLholder2').find('table tr').removeClass('highlight3');
if(dataId)
{
$('#PPLholder2').html(createTable(dataId,'ppl'));
}
else
{
$('#PPLholder2').html('');
}
});
function createTable(dataId,plType)
{
var table = $('<table id="'+dataId+'" class="table table-responsive">');
var data = (plType == 'cpl') ? cplData[dataId] : pplData[dataId];
$.each(data, function(i, item)
{
table.append('<tr><td>' + item + '</td></tr>');
});
return table;
}
<!--for NORMAL FIXATION HIGHLIGHT - starts-->
$('#cb').on('change keyup', function ()
{
var search = $(this).val();
var dupactiveCPL = $('#'+$('#CPLholder2').find('table').attr('id'));
var duppplId = $('#PPLholder2').find('table').attr('id');
var dupactivePPL = $('#'+duppplId);
if(dupactiveCPL != undefined) dupactiveCPL.find('tr').removeClass('highlight highlight2');
$('#dupaftinc').val('');
if(dupactivePPL != undefined) dupactivePPL.find('tr').removeClass('highlight3');
var dupaftinc = 0;
dupactiveCPL.find('tr').find('td').each(function()
{
if($(this).text() == search)
{
$(this).parent('tr').addClass('highlight');
$(this).parent('tr').next().addClass('highlight2');
dupaftinc = $(this).parent('tr').next().next().text();
$('#dupaftinc').val(dupaftinc);
}
});
if(aftinc > 0)
{
var closest = pplData[duppplId].reduce((prev, curr) => {
return Math.abs(curr - dupaftinc) < Math.abs(prev - dupaftinc) && (curr - aftinc) > 0 ? curr : prev;
});
}
if (closest - dupaftinc > 0)
{
dupactivePPL.find('tr').find('td').each(function()
{
if (this.innerHTML == closest)
{
$(this).parent('tr').addClass('highlight3');
var nb = $(this).parent('tr').text();
var nnb = $(this).parent('tr').next().text();
$('#dupnb').val(nnb);
}
});
}
});
<!--for OPTION FIXATION HIGHLIGHT - Ends-->
});
</script>
<script>
$(document).ready(function(){
$('#cl').on('change', function() {
$("#nb").show();
$("#dupnb").show();
});
});
</script>
</body>
</html>