Как выделить соответствующий диапазон чисел на основе входного значения с помощью javascript?
Я хотел бы разработать поле ввода со списком чисел рядом, и когда я ввожу число в поле ввода, код javascript / jquery (я не знаю, какое из них было бы лучшим решением) выделяется (раскрасьте или выделите его жирным шрифтом ) "живите" этот элемент списка относительно того, где он поместится под заданное число.
Вот пример:
числа справа всегда один и тот же пробел? если это так, вы можете взять значение из ввода и сделать (x -1) / 10, от 1 до 10 вы получите 0, от 11 до 20 вы получите 1 и т.д. и установите идентификатор списков от 0 до некоторого числа, тогда просто выберите по идентификатору, чтобы выделить.
—
08.09.2018 10:31
У меня еще нет кода, я просто планирую, чтобы это работало. Но если у вас есть какой-либо фрагмент кода, который можно использовать для запуска или выполнения, я был бы признателен за это. Спасибо.
—
08.09.2018 10:33
@ChrisLi У вас есть какой-нибудь код, чтобы я мог проверить, как он работает?
—
08.09.2018 10:35
@tradingjonah Я сделал здесь jsfiddle jsfiddle.net/Lb7jap3c/7
—
08.09.2018 10:47
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
5
201
6
Перейти к ответу
Данный вопрос помечен как решенный
Ответы 6
Используйте событие 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>Спасибо, отлично смотрится. Можно ли изменить код, если я хочу выделить последний элемент списка, если входной номер больше 110?
—
08.09.2018 11:20
Спасибо, это отличный, простой код;) Не могли бы вы помочь изменить код, потому что, если я хочу использовать последний элемент списка, например «101+», подсветка не работает выше 101.
—
09.09.2018 16:03
@tradingjonah Проверьте последнюю часть ответа и нажмите Show code snippet. Он показывает фрагмент кода для +101
—
10.09.2018 14:34
Попробуйте это, что будет отображать выделение, если введенное число больше максимального номера списка
$(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>Спасибо за решение. Можно ли изменить код, если я хочу выделить последний элемент списка, если входной номер больше 81? Таким образом, последний элемент списка будет 81+
—
08.09.2018 11:22
Не могли бы вы помочь изменить код, потому что, если я хочу использовать последний элемент списка, например «81+», подсветка не будет работать выше 81. Как вы думаете, что это может быть работа с таблицами? Спасибо!
—
09.09.2018 15:46
да, это будет работать со столом, я опубликую новое программное обеспечение для стола, хорошо
—
10.09.2018 06:06
Попробуй это:
$( 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>Попробуйте следующий код для таблицы
$(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>Спасибо за код. Если я пытаюсь использовать его с таблицей начальной загрузки и вставляю число в поле ввода, все строки исчезают из таблицы. Что может вызвать эту проблему?
—
11.09.2018 12:13
Вот мой код, и если вы введете число в поле ввода, содержимое таблицы исчезнет. jsfiddle.net/wLnms9dp/16
—
12.09.2018 20:11
при создании TableBody возникает простая ошибка. В этой переменной u, создающей 3 <td> и в вашей таблице есть только 2 <td>. См. answare i Posting now
—
14.09.2018 06:53
Попробуйте это, если подсветчик не работает над последним номером
$(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> Ответ принят как подходящий
Попробуйте следующее для таблицы
$(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>
Другие вопросы по теме
Отправка данных формы и действия в wordpress admin-ajax.php
Проблемы с закрывающей скобкой в моем коде
PHP и Jquery Создание нескольких динамических списков выбора с вероятным условным поведением
Цикл For не работает должным образом с заменой строки
Получить значения полей ввода из таблицы, содержащей поля ввода в качестве данных?
Используйте кнопку типа отправки, но не для отправки формы
Проверка кнопки `` Применить задание '' из API-интерфейса SheetU с использованием JS
Как изменить CSS в междоменном iframe с помощью jquery для междоменного использования внешней ссылки
Функция загрузки на .click
Добавить удаленный элемент обратно в DOM jQuery 2
Похожие вопросы
Получите сегодняшнюю дату и добавьте 7 дней (для кода подписки Google)
Отправка данных формы и действия в wordpress admin-ajax.php
Настройка HTML-шаблона Themeforest с помощью Vue и Laravel. Загрузка JS файлов на router.push не работает
Фильтрация taskDetails.order_details с использованием регулярного выражения и получение того, что находится в выходном изображении
PHP и Jquery Создание нескольких динамических списков выбора с вероятным условным поведением
Node.JS многослойный массив пользовательских данных
Как я могу разбить массив чисел на отдельные цифры в JavaScript?
Несколько кнопок PHP-JavaScript для добавления нового текстового поля
Не удается заставить событие onclick работать в WordPress
Искровые линии холста
Так поделитесь своим кодом