there is an input textbox with the name Basic (id=cb) and two html table cell values with ids le10 and le11. I have to check the input value upto 3 consecutive levels (2 values from 1st table and 3rd one from 2nd table).
say for eg. if the input value is 69000, the two cell values of table id le10 i.e. 69000 and 71100 to be highlighted (its working with the jquery function)
The 3rd value is to be set in the table id le11. The very next higher value to the 71100 is 71800 in the 2nd table i.e. id le11. This 71800 to be shown in the input box id= nb.
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<style>
.highlight
{
color:red;
background-color:yellow;
font-weight:bold;
}
.highlight2 {
color: blue;
background-color: yellow;
font-weight: bold;
}
.highlight3 {
color: green;
background-color: yellow;
font-weight: bold;
}
</style>
</head>
<body>
<div >
<div >
<div >
<table width="100%" border="0">
<tr>
<td>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>
</div>
</div>
</div>
<table >
<tr>
<td><h6>Current Level</h6></td>
<td><h6>Promotion Level</h6></td>
</tr>
<tr>
<td>
<table id="le10" >
<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>
</td>
<td>
<table id="le11" >
<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>
</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>
<!--match and highlight the Current basic textbox value with the level table-->
<script>
$(function () {
$('#cb').on('change keyup', function() {
var search = $(this).val();
$('table#le10 tr td').filter(function() {
if($(this).text() == search){
$(this).parent('tr').addClass('highlight');
$(this).parent('tr').closest('tr').next().addClass('highlight2');
var aftinc = $(this).parent('tr').closest('tr').next().text();
$('#aftinc').val(aftinc);
}else{
$(this).parent('tr').removeClass('highlight');
$(this).parent('tr').closest('tr').next().removeClass('highlight2');
}
})
});
});
//for extending the search to the 2nd table
$(function () {
$('#aftinc').on('input', function() {
var search2 = $(this).val();
$('table#le11b tr td').filter(function() {
if($(this).text() == search2){
$(this).closest('tr').next().addClass('highlight2');
}else{
$(this).closest('tr').next().removeClass('highlight2');
}
})
});
});
</script>
</body>
</html>
CodePudding user response：
You are very close to the answer, what you left to do is to find the next higher value in table #le11. To start the search for next higher value, You can simply put the code after searching first two values.
I referred to this answer to get the next higher value as below:
- push values from table
#le11to an array - if there is second value
aftinc, find the next higher value ofaftincbyMath.reduce - if there is third value found, search and highlight the corresponding cell
I have also make some minor changes to the code, like
- change
$(this).parent('tr').closest('tr')to$(this).parent('tr'), as mentioned in the comments they output the same result - clear all highlight classes before doing another search, instead of clear it while searching
You can try the code here:
$(function () {
// get values from table le11 for comparison
let tableValues = [];
$('#le11 tr td').each(function () {
tableValues.push(this.innerHTML)
});
$('#cb').on('change keyup', function () {
var search = $(this).val();
// clear classes and init values
$('#le10 tr').removeClass('highlight highlight2');
$('#le11 tr').removeClass('highlight3');
$('#nb').val('');
// find values in #le10
var aftinc = 0;
$('#le10 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 #le11
if (aftinc > 0) {
const 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) {
$('#le11 tr td').each(function () {
if (this.innerHTML === closest) {
// highlight the next higher value
$(this).parent('tr').addClass('highlight3');
}
});
$('#nb').val(closest);
}
}
});
});.highlight
{
color:red;
background-color:yellow;
font-weight:bold;
}
.highlight2 {
color: blue;
background-color: yellow;
font-weight: bold;
}
.highlight3 {
color: green;
background-color: yellow;
font-weight: bold;
}<div >
<div >
<div >
<table width="100%" border="0">
<tr>
<td>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>
</div>
</div>
</div>
<table >
<tr>
<td><h6>Current Level</h6></td>
<td><h6>Promotion Level</h6></td>
</tr>
<tr>
<td>
<table id="le10" >
<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>
</td>
<td>
<table id="le11" >
<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>
</td>
<td>
Next Basic</td><td><input type="text" name="nb" id="nb" autocomplete="off"/>
</td>
</tr>
</table>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>