Таблица фильтров с параметрами data-id на td
Я попытался создать таблицу фильтров с помощью jquery, проблема в том, что я хочу использовать фильтр в значении data-id значения <td>.
Поэтому, когда я выбираю параметр со значением Да = 1, он перейдет к полю фильтра <th>Option A</th>, которое имеет параметр data-id = "1".
Пример HTML
<select id = "choice" class = "form-control select2" >
<option value = "all">choice answer</option>
<option value = "1">Yes</option>
<option value = "2">No</option>
</select>
<table id = "dt-answer" width = "100%" cellspacing = "2">
<thead>
<tr class = "headings">
<th>No</th>
<th>Question</th>
<th>Answer</th>
<th>Option A</th>
<th>Option B</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Question A</td>
<td data-id = "1">Yes</td>
<td>Yes</td>
</tr>
<tr>
<td>2</td>
<td>Question B</td>
<td data-id = "2">No</td>
<td>Yes</td>
</tr>
<tr>
<td>3</td>
<td>Question C</td>
<td data-id = "2">No</td>
<td>No</td>
</tr>
<tr>
<td>4</td>
<td>Question C</td>
<td data-id = "1">Yes</td>
<td>No</td>
</tr>
<tr>
<td>4</td>
<td>Question D</td>
<td data-id = "2">No</td>
<td>No</td>
</tr>
</tbody>
</table>
jquery
$('#choice').change(function() {
var value = $(this).val().toLowerCase();
$("#dt-answer tr").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
})
Ответы 1
Сохранение .each (где использовалось .fitler) - измените свой jquery на:
$('#choice').change(function() {
var value = $(this).val().toLowerCase();
$("#dt-answer tr").each(function() {
$(this).toggle($(this).find(">td[data-id]").data("id") == value > -1)
});
})
Внутри .toggle:
.find ищите потомков (от this, который является tr), которые соответствуют ">td[data-id]" прямые потомки, которые являются td и имеют data-id.data("id") получить идентификатор и сравнить с value
существуют различные альтернативы
.find(">td[data-id]")
например, используя .children() или td:eq(2) для 3-го столбца.
В этом случае нет необходимости в .each (/ .filter), а изменение многих элементов DOM в цикле может привести к тому, что ваше приложение будет работать медленно. Вы можете использовать:
$('#choice').change(function() {
var value = $(this).val().toLowerCase();
$("#dt-answer tr").hide().has(">td[data-id = " + value + "]").show();
})
он работает, но когда я хочу восстановить исходные данные или все, он не работает
Вам нужно будет добавить пункт для этого, например, проверить if ($(this).val() == "") $("#dt-answer tr").show(); else { ..code as above .. }
да я только что подумал об этом и только что закончил, я добавил новые данные-все, чтобы сделать исходный возврат, спасибо за вашу помощь
еще один я использую ваш второй ответ, но как мне следовать, чтобы порядковый номер также изменился <th> No </ th>, ex 2,3,5 на ex 1,2,3
Кроме того: не используйте страницу w3schools для
.filter— это сбивает с толку, поскольку она использует ее как.each—.filterвозвращает отфильтрованную коллекцию, над которой нужно действовать после, чего в примере нет (w3schools.com/jquery/jquery_filters.asp)