Issue
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 class="container">
<div class="row">
<div class="col-md-6">
<table width="100%" border="0">
<tr>
<td>Basic</td><td><input class="form-control" type="text" name="cb" id="cb" autocomplete="off"/></td>
</tr>
<tr><td>after one increment</td><td><input class="form-control" type="text" name="aftinc" id="aftinc" autocomplete="off"/></td></tr>
</table>
</div>
</div>
</div>
<table class="table table-responsive">
<tr>
<td><h6>Current Level</h6></td>
<td><h6>Promotion Level</h6></td>
</tr>
<tr>
<td>
<table id="le10" class="table table-responsive table-striped">
<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" class="table table-responsive table-striped">
<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 class="form-control" 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>
Solution
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
#le11
to an array - if there is second value
aftinc
, find the next higher value ofaftinc
byMath.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 class="container">
<div class="row">
<div class="col-md-6">
<table width="100%" border="0">
<tr>
<td>Basic</td><td><input class="form-control" type="text" name="cb" id="cb" autocomplete="off"/></td>
</tr>
<tr><td>after one increment</td><td><input class="form-control" type="text" name="aftinc" id="aftinc" autocomplete="off"/></td></tr>
</table>
</div>
</div>
</div>
<table class="table table-responsive">
<tr>
<td><h6>Current Level</h6></td>
<td><h6>Promotion Level</h6></td>
</tr>
<tr>
<td>
<table id="le10" class="table table-responsive table-striped">
<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" class="table table-responsive table-striped">
<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 class="form-control" 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>
Answered By - charmian
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.