Таблица фильтра с параметрами data-id на тд - PullRequest
Новая
       13

Таблица фильтра с параметрами data-id на тд

0 голосов
/ 08 апреля 2019

Я пытался создать таблицу фильтров с помощью 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>

1012 * JQuery * 

$('#choice').change(function() {
    var value = $(this).val().toLowerCase();
    $("#dt-answer tr").filter(function() {
        $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
    });
})

1 Ответ

1 голос
/ 08 апреля 2019

Сохраняя .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") получить идентификатор и сравнить с 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();
})
...