Me gustaría desarrollar un cuadro de entrada con una lista de números al lado y cuando ingrese un número en el campo de entrada, el código javascript / jquery (no sé cuál sería la mejor solución) resalta (colorea o lo pone en negrita) ) "vive" ese elemento de la lista con respecto a dónde encajar el número dado.

Aquí está el ejemplo:

Input box with value selector

1
user10333892 8 sep. 2018 a las 11:25

6 respuestas

La mejor respuesta

Pruebe la siguiente tabla Para

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

1
Som 14 sep. 2018 a las 04:59

Use el evento jquery keyup para ejecutar el código cuando la tecla se ingresa en la entrada. En caso de que el oyente utilice el elemento Seleccionar todo li contiene valores de rango y usar .filter() para filtrar valores.

En la función, compruebe si el valor de entrada está dentro del rango y luego devuelva true para seleccionar el objetivo 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>

Si desea resaltar el último número si el valor de entrada es mayor que él, use el código inferior:

$(".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>
4
Mohammad 8 sep. 2018 a las 10:03

Pruebe el siguiente código para la tabla

$(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
Som 10 sep. 2018 a las 06:19

Pruébalo:

$( 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
Riccardo Volpe 8 sep. 2018 a las 09:43

Pruebe esto para resaltar no funciona por encima del último número

   $(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>
0
Som 10 sep. 2018 a las 06:23

Pruebe esto, que mostrará resaltado si el número ingresado es mayor que el número máximo de la lista

 $(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
Som 8 sep. 2018 a las 09:54