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

问题描述 投票：1回答：6

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

这是一个例子：

javascript jquery html
6个回答
1
投票

尝试以下表格

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

enter image description here

4
投票

使用jquery keyup事件在键输入时运行代码。在事件监听器使用中，选择所有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>
0
投票

测试一下：

$( 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>
0
投票

尝试这将显示突出显示输入的数字是否大于最大列表编号

 $(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>
0
投票

请尝试以下代码表

$(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>
0
投票

试试这个用于荧光笔并不适用于最后一个数字

   $(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>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.