如何使用javascript根据输入值突出显示数字的相关范围？

Question

我想开发一个带有数字列表的输入框，当我在输入字段中输入数字时，javascript / jquery代码（我不知道哪个是更好的解决方案）高亮显示（着色或使其为粗体样式） ）“直播”该列表元素，以了解适合给定数字的位置。

这是示例：

Answer 1

当输入键被调高时，使用jquery keyup事件运行代码。 在事件侦听器中，使用select所有li元素包含范围值，并使用.filter()来过滤值。

在功能中，检查输入值是否在范围内，然后返回true以选择目标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> 

如果要在输入值大于最后一个数字时突出显示该数字，请使用底部代码：

 $(".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> 

Answer 2

试试下面的表

  $(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> 

Answer 3

尝试此操作，如果输入的数字大于最大列表数，它将高亮显示

  $(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> 

Answer 4

测试一下：

 $( 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> 

Answer 5

尝试为表遵循以下代码

 $(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> 

Answer 6

尝试使用此荧光笔在最后一个数字以上不起作用

  $(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>