user10333892
Reputation:
How to highlight relevant range of number based on input value using javascript?
I would like to develop an input box with a list of numbers beside and when I enter a number into the input field the javascript/jquery code(I don't know which one would be better solution) highlight(colorize or make it bold style) "live" that list element regarding where to fit the given number.
Here is the example:
Upvotes: 1
Views: 958
Answers (6)
Som
Reputation: 598
Try The following For table
$(document).on('keyup','#user-count',function(){
var SearchedNumber=parseInt($('#user-count').val());
var Number=$('#user-table tr:not(:first) td:first-child');
var AllTr=$('#user-table tr:not(:first)');
var TableBody='';
var maxCount= AllTr[AllTr.length-1].innerText.trim().split('+')[0];//get max Count of your Number list
$('#user-table tbody').empty();
$.each(Number,function(i,TD){
var Text=TD.innerText.trim().split('-');
if(SearchedNumber>=maxCount)//compare max Count
{
if(i==AllTr.length-1)
{
TableBody+='<tr style="background-color:#4caf50;font-size:20px"><td>'+$(AllTr[i]).find('td')[0].innerText+'</td><td>'+$(AllTr[i]).find('td')[1].innerText+'</td></tr>';
}
else
{
TableBody+='<tr><td>'+$(AllTr[i]).find('td')[0].innerText+'</td><td>'+$(AllTr[i]).find('td')[1].innerText+'</td></tr>';
}
}
else
{
if(SearchedNumber>=Text[0] && SearchedNumber<=Text[1])
{
TableBody+='<tr style="background-color:#4caf50;font-size:20px"><td>'+$(AllTr[i]).find('td')[0].innerText+'</td><td>'+$(AllTr[i]).find('td')[1].innerText+'</td></tr>';
}
else
{
TableBody+='<tr><td>'+$(AllTr[i]).find('td')[0].innerText+'</td><td>'+$(AllTr[i]).find('td')[1].innerText+'</td></tr>';
}
}
});
$('#user-table tbody').append(TableBody);
});.table-striped tbody tr:nth-of-type(even) {
background-color: #ddd;
font-weight: 600;
font-size: 20px;
}
.table-striped tbody tr:nth-of-type(odd) {
background-color: rgba(0, 0, 0, 0);
font-weight: 600;
font-size: 20px;
}
.table-striped thead {
background-color: #f1f1f1;
border-bottom: 2px solid #c0c0c0;
border-top: 2px solid #c0c0c0;
color: #404040;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<div class="col-md-8 text-right mt-4">
<h5 class="text-center">Users table</h5>
</div>
<div class="col-md-4 mt-4">
<form class="">
<div class="form-group">
<center><input type="number" id="user-count"/></center>
</div>
</form>
</div>
</div>
<div class="row mt-5 mb-5">
<div class="col-md-12">
<table class="table table-striped" id="user-table">
<thead class="table-striped">
<tr>
<th>User Count</th>
<th class="text-center">Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>0-1</td>
<td class="text-center">$1000</td>
</tr>
<tr>
<td>2-40</td>
<td class="text-center">$2000</td>
</tr>
<tr>
<td>41-250</td>
<td class="text-center">$3000</td>
</tr>
<tr>
<td>251+</td>
<td class="text-center">$4000</td>
</tr>
</tbody>
</table>
</div>
</div>
Upvotes: 1
Som
Reputation: 598
Try This for highlighter doesnt works above last Number
$(document).on('keyup keydown','#txtNumber',function(){
var Number=parseInt($('#txtNumber').val());
var allLi=$('#TestList').find('li');
$('#TestList').empty();
var UlBody='';
$.each(allLi,function(i,Li){
var Text=Li.innerText.trim().split('-');
if(Number>=Text[0] && Number<=Text[1])
{
UlBody+='<li style="color:#4caf50;font-weight: bold;font-size:20px;">'+Li.innerText+'</li>';
}
else
{
UlBody+='<li>'+Li.innerText+'</li>';
}
});
$('#TestList').append(UlBody);
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="number" id="txtNumber" />
<ul id="TestList" style="list-style-type:none">
<li>1-10</li>
<li>11-20</li>
<li>21-40</li>
<li>41-50</li>
<li>51-60</li>
<li>61-81</li>
</ul>Upvotes: 0
Som
Reputation: 598
Try Following Code For The table
$(document).on('keyup','#txtNumber',function(){
debugger;
var SearchedNumber=parseInt($('#txtNumber').val());
var Number=$('#TestTable tr:not(:first) td:first-child');
var AllTr=$('#TestTable tr:not(:first)');
var TableBody='';
$('#TestTable tbody').empty();
$.each(Number,function(i,TD){
debugger;
var Text=TD.innerText.trim().split('-');
if(SearchedNumber>=Text[0] && SearchedNumber<=Text[1])
{
TableBody+='<tr style="background-color:#4caf50;font-size:20px"><td>'+$(AllTr[i]).find('td')[0].innerText+'</td><td>'+$(AllTr[i]).find('td')[1].innerText+'</td><td>'+$(AllTr[i]).find('td')[2].innerText+'</td></tr>';
}
else
{
TableBody+='<tr><td>'+$(AllTr[i]).find('td')[0].innerText+'</td><td>'+$(AllTr[i]).find('td')[1].innerText+'</td><td>'+$(AllTr[i]).find('td')[2].innerText+'</td></tr>';
}
});
$('#TestTable tbody').append(TableBody);
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="number" id="txtNumber"/>
<br/><br/>
<table border="1" id="TestTable">
<thead>
<tr>
<td>Number</td>
<td>Heading1</td>
<td>Heading2</td>
</tr>
</thead>
<tbody>
<tr>
<td>0-10</td>
<td>1</td>
<td>Mumbai</td>
</tr>
<tr>
<td>11-20</td>
<td>2</td>
<td>Pune</td>
</tr>
<tr>
<td>21-40</td>
<td>3</td>
<td>Navi Mumbai</td>
</tr>
<tr>
<td>51-60</td>
<td>4</td>
<td>Panvel</td>
</tr>
</tbody>
</table>Upvotes: 0
Mohammad
Reputation: 21489
Use jquery keyup event to running code when key upped on input. In event listener use select all li element contain range values and use .filter() to filtering values.
In function check if value of input is in range then return true to selecting target li.
$(".number-val").keyup(function(){
var value = this.value;
$(".number-list li").css("color", "").filter(function(){
var parts = $(this).text().split("-");
return (parseInt(parts[0]) <= value && value <= parseInt(parts[1]))
}).css("color", "lightgreen");
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>input field of number</p>
<input type="number" class="number-val">
<ul class="number-list">
<li>1-10</li>
<li>11-20</li>
<li>21-40</li>
<li>41-50</li>
<li>51-60</li>
<li>61-80</li>
<li>81-100</li>
<li>101-110</li>
</ul>If you want to highlight last number if input value is greater than it, use bottom code:
$(".number-val").on("keyup", function(){
var value = this.value;
$(".number-list li").css("color", "").filter(function(){
var parts = $(this).text().split("-");
parts[1] == "" ? parts[1] = Number.MAX_SAFE_INTEGER : "";
return (parseInt(parts[0]) <= value && value <= parseInt(parts[1]))
}).css("color", "lightgreen");
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>input field of number</p>
<input type="number" class="number-val">
<ul class="number-list">
<li>1-10</li>
<li>11-20</li>
<li>21-40</li>
<li>41-50</li>
<li>51-60</li>
<li>61-80</li>
<li>81-100</li>
<li>101-</li>
</ul>Upvotes: 4
Som
Reputation: 598
Try This which will show highlight if entered number is greater than max list number
$(document).on('keyup keydown','#txtNumber',function(){
var Number=parseInt($('#txtNumber').val());
var allLi=$('#TestList').find('li');
$('#TestList').empty();
var UlBody='';
var maxCount= allLi[allLi.length-1].innerText.trim().split('-')[0];//get max Count of your Number list
$.each(allLi,function(i,Li){
var Text=Li.innerText.trim().split('-');
if(Number>=maxCount)//compare max Count
{
if(i==allLi.length-1)
{
UlBody+='<li style="color:#4caf50;font-weight: bold;font-size:20px;">'+Li.innerText+'</li>';
}
else
{
UlBody+='<li>'+Li.innerText+'</li>';
}
}
else
{
if(Number>=Text[0] && Number<=Text[1])
{
UlBody+='<li style="color:#4caf50;font-weight: bold;font-size:20px;">'+Li.innerText+'</li>';
}
else
{
UlBody+='<li>'+Li.innerText+'</li>';
}
}
});
$('#TestList').append(UlBody);
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="number" id="txtNumber" />
<ul id="TestList" style="list-style-type:none">
<li>1-10</li>
<li>11-20</li>
<li>21-40</li>
<li>41-50</li>
<li>51-60</li>
<li>61-80</li>
<li>81-Plus</li>
</ul>Upvotes: 0
Riccardo Volpe
Reputation: 1623
Test it:
$( document ).ready(function() {
$("#number").change(function(){
var entry = $("#number").val();
if ( entry < 0 ) {
$( ".entry" ).remove();
$( ".0_minus" ).append( "<span class='entry'>"+entry+"</span>" );
} else if ( 0 <= entry && entry <= 9 ) {
$( ".entry" ).remove();
$( ".0_9" ).append( "<span class='entry'>"+entry+"</span>" );
} else if ( 10 <= entry && entry <= 19 ) {
$( ".entry" ).remove();
$( ".10_19" ).append( "<span class='entry'>"+entry+"</span>" );
} else if ( 20 <= entry && entry <= 29 ) {
$( ".entry" ).remove();
$( ".20_29" ).append( "<span class='entry'>"+entry+"</span>" );
} else if ( 30 <= entry && entry <= 39 ) {
$( ".entry" ).remove();
$( ".30_39" ).append( "<span class='entry'>"+entry+"</span>" );
} else if ( 40 <= entry && entry <= 49 ) {
$( ".entry" ).remove();
$( ".40_49" ).append( "<span class='entry'>"+entry+"</span>" );
} else if ( 50 <= entry && entry <= 59 ) {
$( ".entry" ).remove();
$( ".50_59" ).append( "<span class='entry'>"+entry+"</span>" );
} else if ( 60 <= entry && entry <= 69 ) {
$( ".entry" ).remove();
$( ".60_69" ).append( "<span class='entry'>"+entry+"</span>" );
} else if ( 70 <= entry && entry <= 79 ) {
$( ".entry" ).remove();
$( ".70_79" ).append( "<span class='entry'>"+entry+"</span>" );
} else if ( 80 <= entry && entry <= 89 ) {
$( ".entry" ).remove();
$( ".80_89" ).append( "<span class='entry'>"+entry+"</span>" );
} else if ( 90 <= entry && entry <= 99 ) {
$( ".entry" ).remove();
$( ".90_99" ).append( "<span class='entry'>"+entry+"</span>" );
} else if ( entry >= 100 ) {
$( ".entry" ).remove();
$( ".100_plus" ).append( "<span class='entry'>"+entry+"</span>" );
}
});
});body {
color: #1a1a1a;
}
.entry {
color: red;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<fieldset>
<legend>Demo</legend>
<label for="height">Number entry:</label>
<input type="number" id="number" name="Number"
placeholder="Enter your number..." step="1" />
<ul>
<li class="0_minus">Minus 0: </li>
<li class="0_9">0 - 9: </li>
<li class="10_19">10 - 19: </li>
<li class="20_29">20 - 29: </li>
<li class="30_39">30 - 39: </li>
<li class="40_49">40 - 49: </li>
<li class="50_59">50 - 59: </li>
<li class="60_69">60 - 69: </li>
<li class="70_79">70 - 79: </li>
<li class="80_89">80 - 89: </li>
<li class="90_99">90 - 99: </li>
<li class="100_plus">100 plus: </li>
</ul>
</fieldset>Upvotes: 0
Related Questions
- input type range show range value in input type number in html
- Number only input box with range restriction
- input type range with specific numbers
- Mix/max range applied to specific number input field
- HTML - Input range for integer
- Specify range of numbers based on the selected number
- using jquery to detect number ranges
- Javascript/Jquery: validate input with a number range
- Specify range of numbers to input in number field using javascript
- min max number in text input - Jquery/javascript