There are dropdown boxes with labels -Current Level- and -Promotion in Level-. On selection of the options of these selection boxes, corresponding values will be populated in the Table Cells like - Current Pay Level - and -Promotion Pay Level-.
On input of any value of the populated Current Pay Level table column in the Current Basic Textbox, consecutive three values will be highlighted on both table cells.
The third highlighted value (that is the max value among the three highlighted values) in the -Promotion Pay Level- column should be assigned to the textbox id - nb.
With the current jquery function, only the last pair comparison i.e. Level 13 and Level 13A from the Dropdown Select option boxes only showing the result in textbox id - nb.
Eg. User will select level 7 in first option box and level 10 in another option box, assume that the current basic textbox is given with a value like 47600, consecutive values will be 47600, 49000 and 56100. So, here 56100 should be shown in the textbox id "nb".
<!DOCTYPE html>
<html lang="en">
<head>
<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">
<style>
table#le7a{
display:none;
}
table#le10a{
display:none;
}
table#le10b{
display:none;
}
table#le11a{
display:none;
}
table#le11b{
display:none;
}
table#le12a{
display:none;
}
table#le12b{
display:none;
}
table#le13a{
display:none;
}
table#le13b{
display:none;
}
table#le13ab{
display:none;
}
.highlight
{
color:red;
background-color:yellow;
font-weight:bold;
}
.highlight2 {
color: blue;
background-color:white;
font-weight: bold;
}
.highlight3 {
color: green;
background-color:yellow;
font-weight: bold;
}
</style>
</head>
<body>
<div >
<div >
<div >
</div>
<div >
<form action="index.php" method="post">
<table width="100%" border="0">
<tr>
<td>Current Level</td><td><select name="cl" id="cl" autocomplete="off">
<option value="0">Select</option>
<option value="1">Level 7 (GP 4600/-)</option>
<option value="2">Level 10 (GP 5400/-)</option>
<option value="3">Level 11 (GP 6600/-)</option>
<option value="4">Level 12 (GP 7600/-)</option>
<option value="5">Level 13 (GP 8700/-)</option>
</select></td>
</tr>
<tr>
<td>Promotion in Level</td><td><select name="pl" id="pl" autocomplete="off">
<option value="0">Select</option>
<option value="1">Level 10 (GP 5400/-)</option>
<option value="2">Level 11 (GP 6600/-)</option>
<option value="3">Level 12 (GP 7600/-)</option>
<option value="4">Level 13 (GP 8700/-)</option>
<option value="5">Level 13A (GP 8900/-)</option>
</select></td>
</tr>
<tr>
<td>Current Basic</td><td><input type="text" name="cb" id="cb" autocomplete="off"/></td>
</tr>
<tr>
<td>after one increment</td><td><input type="text" name="aftinc" id="aftinc" autocomplete="off"/></td>
</tr>
</table>
</form>
</div>
</div>
</div>
<table >
<tr>
<td><h6>Current Pay Level</h6></td>
<td><h6>Promotion Pay Level</h6></td>
</tr>
<tr>
<td>
<table id="le7a" >
<tr><td>44900</td></tr>
<tr><td>46200</td></tr>
<tr><td>47600</td></tr>
<tr><td>49000</td></tr>
<tr><td>50500</td></tr>
<tr><td>52000</td></tr>
<tr><td>53600</td></tr>
<tr><td>55200</td></tr>
<tr><td>56900</td></tr>
<tr><td>58600</td></tr>
<tr><td>60400</td></tr>
<tr><td>62200</td></tr>
<tr><td>64100</td></tr>
<tr><td>66000</td></tr>
<tr><td>68000</td></tr>
<tr><td>70000</td></tr>
<tr><td>72100</td></tr>
<tr><td>74300</td></tr>
</table>
<table id="le10a" >
<tr><td>56100</td></tr>
<tr><td>57800</td></tr>
<tr><td>59500</td></tr>
<tr><td>61300</td></tr>
<tr><td>63100</td></tr>
<tr><td>65000</td></tr>
<tr><td>67000</td></tr>
<tr><td>69000</td></tr>
<tr><td>71100</td></tr>
<tr><td>73200</td></tr>
<tr><td>75400</td></tr>
<tr><td>77700</td></tr>
</table>
<table id="le11a" >
<tr><td>67700</td></tr>
<tr><td>69700</td></tr>
<tr><td>71800</td></tr>
<tr><td>74000</td></tr>
<tr><td>76200</td></tr>
<tr><td>78500</td></tr>
<tr><td>80900</td></tr>
<tr><td>83300</td></tr>
<tr><td>85800</td></tr>
<tr><td>88400</td></tr>
<tr><td>91100</td></tr>
<tr><td>93800</td></tr>
</table>
<table id="le12a" >
<tr><td>78800</td></tr>
<tr><td>81200</td></tr>
<tr><td>83600</td></tr>
<tr><td>86100</td></tr>
<tr><td>88700</td></tr>
<tr><td>91400</td></tr>
<tr><td>94100</td></tr>
<tr><td>96900</td></tr>
<tr><td>99800</td></tr>
<tr><td>102800</td></tr>
<tr><td>105900</td></tr>
<tr><td>109100</td></tr>
</table>
<table id="le13a" >
<tr><td>123100</td></tr>
<tr><td>123800</td></tr>
<tr><td>130600</td></tr>
<tr><td>134500</td></tr>
<tr><td>138500</td></tr>
<tr><td>142700</td></tr>
<tr><td>147000</td></tr>
<tr><td>151400</td></tr>
<tr><td>155900</td></tr>
<tr><td>160600</td></tr>
<tr><td>165400</td></tr>
<tr><td>170400</td></tr>
</table>
</td>
<td>
<table id="le10b" >
<tr><td>56100</td></tr>
<tr><td>57800</td></tr>
<tr><td>59500</td></tr>
<tr><td>61300</td></tr>
<tr><td>63100</td></tr>
<tr><td>65000</td></tr>
<tr><td>67000</td></tr>
<tr><td>69000</td></tr>
<tr><td>71100</td></tr>
<tr><td>73200</td></tr>
<tr><td>75400</td></tr>
<tr><td>77700</td></tr>
</table>
<table id="le11b" >
<tr><td>67700</td></tr>
<tr><td>69700</td></tr>
<tr><td>71800</td></tr>
<tr><td>74000</td></tr>
<tr><td>76200</td></tr>
<tr><td>78500</td></tr>
<tr><td>80900</td></tr>
<tr><td>83300</td></tr>
<tr><td>85800</td></tr>
<tr><td>88400</td></tr>
<tr><td>91100</td></tr>
<tr><td>93800</td></tr>
</table>
<table id="le12b" >
<tr><td>78800</td></tr>
<tr><td>81200</td></tr>
<tr><td>83600</td></tr>
<tr><td>86100</td></tr>
<tr><td>88700</td></tr>
<tr><td>91400</td></tr>
<tr><td>94100</td></tr>
<tr><td>96900</td></tr>
<tr><td>99800</td></tr>
<tr><td>102800</td></tr>
<tr><td>105900</td></tr>
<tr><td>109100</td></tr>
</table>
<table id="le13b" >
<tr><td>123100</td></tr>
<tr><td>123800</td></tr>
<tr><td>130600</td></tr>
<tr><td>134500</td></tr>
<tr><td>138500</td></tr>
<tr><td>142700</td></tr>
<tr><td>147000</td></tr>
<tr><td>151400</td></tr>
<tr><td>155900</td></tr>
<tr><td>160600</td></tr>
<tr><td>165400</td></tr>
<tr><td>170400</td></tr>
</table>
<table id="le13ab" >
<tr><td>131100</td></tr>
<tr><td>135000</td></tr>
<tr><td>139100</td></tr>
<tr><td>143300</td></tr>
<tr><td>147600</td></tr>
<tr><td>152000</td></tr>
<tr><td>156600</td></tr>
<tr><td>161300</td></tr>
<tr><td>166100</td></tr>
<tr><td>171100</td></tr>
<tr><td>176200</td></tr>
<tr><td>181500</td></tr>
</table>
</td>
<td>
Next Basic</td><td><input type="text" name="nb" id="nb" autocomplete="off"/>
</td>
</tr>
</table>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('#dop').change( function(){
$('#pf').val($(this).val());
});
});
</script>
<script>
$(document).ready(function(){
$('#cl').on('change', function() {
if ( this.value == '1')
{
$("#le7a").show();
}
else
{
$("#le7a").hide();
}
});
});
$(document).ready(function(){
$('#cl').on('change', function() {
if ( this.value == '2')
{
$("#le10a").show();
}
else
{
$("#le10a").hide();
}
});
});
$(document).ready(function(){
$('#cl').on('change', function() {
if ( this.value == '3')
{
$("#le11a").show();
}
else
{
$("#le11a").hide();
}
});
});
$(document).ready(function(){
$('#cl').on('change', function() {
if ( this.value == '4')
{
$("#le12a").show();
}
else
{
$("#le12a").hide();
}
});
});
$(document).ready(function(){
$('#cl').on('change', function() {
if ( this.value == '5')
{
$("#le13a").show();
}
else
{
$("#le13a").hide();
}
});
});
$(document).ready(function(){
$('#pl').on('change', function() {
if ( this.value == '1')
{
$("#le10b").show();
}
else
{
$("#le10b").hide();
}
});
});
$(document).ready(function(){
$('#pl').on('change', function() {
if ( this.value == '2')
{
$("#le11b").show();
}
else
{
$("#le11b").hide();
}
});
});
$(document).ready(function(){
$('#pl').on('change', function() {
if ( this.value == '3')
{
$("#le12b").show();
}
else
{
$("#le12b").hide();
}
});
});
$(document).ready(function(){
$('#pl').on('change', function() {
if ( this.value == '4')
{
$("#le13b").show();
}
else
{
$("#le13b").hide();
}
});
});
$(document).ready(function(){
$('#pl').on('change', function() {
if ( this.value == '5')
{
$("#le13ab").show();
}
else
{
$("#le13ab").hide();
}
});
});
</script>
<!--Level 07 to 10 fixation starts-->
<script>
$(function () {
// get values from table le10b for comparison
let tableValues = [];
$('#le10b tr td').each(function () {
tableValues.push(this.innerHTML)
});
$('#cb').on('change keyup', function () {
var search = $(this).val();
// clear classes and init values
$('#le7a tr').removeClass('highlight highlight2');
$('#le10b tr').removeClass('highlight3');
$('#nb').val('');
// find values in #le7a
var aftinc = 0;
$('#le7a tr 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 values found, find next higher value in #le10
if (aftinc > 0) {
var closest = tableValues.reduce((prev, curr) => {
return Math.abs(curr - aftinc) < Math.abs(prev - aftinc) && (curr - aftinc) > 0 ? curr : prev;
});
// check value found
if (closest - aftinc > 0) {
$('#le10b tr td').each(function () {
if (this.innerHTML === closest) {
// highlight the next higher value
$(this).parent('tr').addClass('highlight3');
var nb = $(this).parent('tr').text();
$('#nb').val(nb);
}
});
}
}
});
});
</script>
<!--Level 7 to 10 fixation Ends-->
<!--Level 10 to 11 fixation starts-->
<script>
$(function () {
// get values from table le11b for comparison
let tableValues = [];
$('#le11b tr td').each(function () {
tableValues.push(this.innerHTML)
});
$('#cb').on('change keyup', function () {
var search = $(this).val();
// clear classes and init values
$('#le10a tr').removeClass('highlight highlight2');
$('#le11b tr').removeClass('highlight3');
$('#nb').val('');
// find values in #le10a
var aftinc = 0;
$('#le10a tr 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 values found, find next higher value in #le11b
if (aftinc > 0) {
var closest = tableValues.reduce((prev, curr) => {
return Math.abs(curr - aftinc) < Math.abs(prev - aftinc) && (curr - aftinc) > 0 ? curr : prev;
});
// check value found
if (closest - aftinc > 0) {
$('#le11b tr td').each(function () {
if (this.innerHTML === closest) {
// highlight the next higher value
$(this).parent('tr').addClass('highlight3');
}
});
$('#nb').val(closest);
}
}
});
});
</script>
<!--Level 10 to 11 fixation Ends-->
<!--Level 11 to 12 fixation starts-->
<script>
$(function () {
// get values from table le12b for comparison
let tableValues = [];
$('#le12b tr td').each(function () {
tableValues.push(this.innerHTML)
});
$('#cb').on('change keyup', function () {
var search = $(this).val();
// clear classes and init values
$('#le11a tr').removeClass('highlight highlight2');
$('#le12b tr').removeClass('highlight3');
$('#nb').val('');
// find values in #le11a
var aftinc = 0;
$('#le11a tr 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 values found, find next higher value in #le12b
if (aftinc > 0) {
var closest = tableValues.reduce((prev, curr) => {
return Math.abs(curr - aftinc) < Math.abs(prev - aftinc) && (curr - aftinc) > 0 ? curr : prev;
});
// check value found
if (closest - aftinc > 0) {
$('#le12b tr td').each(function () {
if (this.innerHTML === closest) {
// highlight the next higher value
$(this).parent('tr').addClass('highlight3');
}
});
$('#nb').val(closest);
}
}
});
});
</script>
<!--Level 11 to 12 fixation Ends-->
<!--Level 12 to 13 fixation starts-->
<script>
$(function () {
// get values from table le13b for comparison
let tableValues = [];
$('#le13b tr td').each(function () {
tableValues.push(this.innerHTML)
});
$('#cb').on('change keyup', function () {
var search = $(this).val();
// clear classes and init values
$('#le12a tr').removeClass('highlight highlight2');
$('#le13b tr').removeClass('highlight3');
$('#nb').val('');
// find values in #le12a
var aftinc = 0;
$('#le12a tr 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 values found, find next higher value in #le13b
if (aftinc > 0) {
var closest = tableValues.reduce((prev, curr) => {
return Math.abs(curr - aftinc) < Math.abs(prev - aftinc) && (curr - aftinc) > 0 ? curr : prev;
});
// check value found
if (closest - aftinc > 0) {
$('#le13b tr td').each(function () {
if (this.innerHTML === closest) {
// highlight the next higher value
$(this).parent('tr').addClass('highlight3');
}
});
$('#nb').val(closest);
}
}
});
});
</script>
<!--Level 12 to 13 fixation Ends-->
<!--Level 13 to 13a fixation starts-->
<script>
$(function () {
// get values from table le13ab for comparison
let tableValues = [];
$('#le13ab tr td').each(function () {
tableValues.push(this.innerHTML)
});
$('#cb').on('change keyup', function () {
var search = $(this).val();
// clear classes and init values
$('#le13a tr').removeClass('highlight highlight2');
$('#le13ab tr').removeClass('highlight3');
$('#nb').val('');
// find values in #le13a
var aftinc = 0;
$('#le13a tr 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 values found, find next higher value in #le13ab
if (aftinc > 0) {
var closest = tableValues.reduce((prev, curr) => {
return Math.abs(curr - aftinc) < Math.abs(prev - aftinc) && (curr - aftinc) > 0 ? curr : prev;
});
// check value found
if (closest - aftinc > 0) {
$('#le13ab tr td').each(function () {
if (this.innerHTML === closest) {
// highlight the next higher value
$(this).parent('tr').addClass('highlight3');
}
});
$('#nb').val(closest);
}
}
});
});
</script>
<!--Level 13 to 13a fixation Ends-->
</body>
CodePudding user response：
I'm not sure whether the values in the select and tables are static, but give this a try. I have simplified your code and not completely tested
$(function(){
var cplData = {
'le7a' : [44900,46200,47600,49000,50500,52000,53600,55200,56900,58600,60400,62200,64100,66000,68000,70000,72100,74300],
'le10a' : [56100,57800,59500,61300,63100,65000,67000,69000,71100,73200,75400,77700],
'le11a' : [67700,69700,71800,74000,76200,78500,80900,83300,85800,88400,91100,93800],
'le12a' : [78800,81200,83600,86100,88700,91400,94100,96900,99800,102800,105900,109100],
'le13a' : [123100,123800,130600,134500,138500,142700,147000,151400,155900,160600,165400,170400]
}
var pplData = {
'le10b' : [56100,57800,59500,61300,63100,65000,67000,69000,71100,73200,75400,77700],
'le11b' : [67700,69700,71800,74000,76200,78500,80900,83300,85800,88400,91100,93800],
'le12b' : [78800,81200,83600,86100,88700,91400,94100,96900,99800,102800,105900,109100],
'le13b' : [123100,123800,130600,134500,138500,142700,147000,151400,155900,160600,165400,170400],
'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('');
}
});
function createTable(dataId,plType)
{
var table = $('<table id="' dataId '" >');
var data = (plType == 'cpl') ? cplData[dataId] : pplData[dataId];
$.each(data, function(i, item)
{
table.append('<tr><td>' item '</td></tr>');
});
return table;
}
$('#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();
$('#nb').val(nb);
}
});
}
});
});.highlight
{
color:red;
background-color:yellow;
font-weight:bold;
}
.highlight2 {
color: blue;
background-color:white;
font-weight: bold;
}
.highlight3 {
color: green;
background-color:yellow;
font-weight: bold;
}<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.1/css/bootstrap.min.css" integrity="sha512-siwe/oXMhSjGCwLn scraPOWrJxHlUgMBMZXdPe2Tnk3I0x3ESCoLz7WZ5NTH6SZrywMY PB1cjyqJ5jAluCOg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<div >
<div >
<div >
<form action="index.php" method="post">
<table width="100%" border="0">
<tr>
<td>Current Level</td>
<td>
<select 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 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 type="text" name="cb" id="cb" autocomplete="off"/></td>
</tr>
<tr>
<td>after one increment</td>
<td><input type="text" name="aftinc" id="aftinc" autocomplete="off"/></td>
</tr>
</table>
</form>
</div>
<table >
<tr>
<th>Current Pay Level</th>
<th>Promotion Pay Level</th>
<th>Next Basic</th>
</tr>
<tr>
<td id="CPLholder"> </td>
<td id="PPLholder"> </td>
<td><input type="text" name="nb" id="nb" autocomplete="off"/></td>
</tr>
</table>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>