| denis_kontarev | 01.04.2018 09:33 |
сразу исключаем всю строку tr, если условия не подходят 
Фильтр данных в таблице при заданном условии
Вложений: 1
Здравствуйте, прошу помочь реализовать идею живой фильтрации данных. Есть таблица с числовыми данными, необходимо отображать только те tr, которые больше числа, которое мы указали в окошке input. Прошу помочь написать код, спасибо.
Есть код поиска в таблице именно по символам, а как сделать, чтоб он искал только числа при заданном диапазоне к примеру >30 $(document).ready(function(){
$("#search").keyup(function(){
_this = this;
$.each($("#filter tbody tr"), function() {
if($(this).text().toLowerCase().indexOf($(_this).val().toLowerCase()) === -1)
$(this).hide();
else
$(this).show();
});
});
});
|
Цитата:
|
сразу исключаем всю строку tr, если условия не подходят
|
denis_kontarev,
сделайте минимальный html. |
<div class="form-group"> <input type="text" class="form-control pull-right" id="search" placeholder="Поиск по таблице"> </div> <table class="simple" id="filter"> <tr> <td>33%</td> <td>30%</td> <td>41%</td> </tr> <tr> <td>56%</td> <td>20%</td> <td>40%</td> </tr> <tr> <td>80%</td> <td>13%</td> <td>56%</td> </tr> </table> К примеру пишем в поисковой форме число 50 и он показывает только tr с числами больше 50 |
фильтрация строк таблицы
denis_kontarev,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function() {
$("#search").on("input", function() {
var val = +this.value.trim();
$.each($("#filter tbody tr"), function(i, tr) {
var td = [].filter.call(tr.querySelectorAll("td"), function(td) {
var num = +td.textContent.replace(/\D/g, "");
return isNaN(val) || !isNaN(num) && val < num;
});
$(this).toggle(!!td.length);
});
});
});
</script>
</head>
<body>
<div class="form-group">
<input type="text" class="form-control pull-right" id="search" placeholder="Поиск по таблице">
</div>
<table class="simple" id="filter">
<tr>
<td>33%</td>
<td>30%</td>
<td>41%</td>
</tr>
<tr>
<td>56%</td>
<td>20%</td>
<td>40%</td>
</tr>
<tr>
<td>80%</td>
<td>13%</td>
<td>56%</td>
</tr>
</table>
</body>
</html>
|
Спасибо, но то ли я не могу додумать, то ли бог его знает, но ругается на
var num = +td.textContent.replace(/\D/g, ""); |
denis_kontarev,
значит у вас в ячейках не то что, что вы показали в макете. |
А можно ли поменять условие только в этой строке? чтоб скрипт воспринимал только числа
if($(this).text().toLowerCase().indexOf($(_this).val().toLowerCase()) === -1) |
denis_kontarev,
постарайтесь разобраться в предложенном решении выше, буду удивлён если кто-то предложит алгоритм без цикла по ячейкам, либо вы что-то не договариваите, либо невнимательно скопировали. |
| Часовой пояс GMT +3, время: 09:06. |