jQuery - Таблица с кнопкой на каждой строке, как переключить класс при нажатии кнопки? - PullRequest
Новая
       6

jQuery - Таблица с кнопкой на каждой строке, как переключить класс при нажатии кнопки?

1 голос
/ 24 февраля 2020

У меня есть dataTable, и в каждой строке у меня есть кнопка, которая при нажатии показывает другую строку. Я хочу прикрепить класс к нажатой кнопке. Я попытался просто добавить $('#detailMenuDropdown').addClass('rotate');, но менялась только первая кнопка.

Мое исследование показало, что я использовал сочетание этого и нашел, но он все еще не работает. 

  $("#complexProcessTable tbody").on('click', '#detailMenuDropdown', function () {
    let table = $("#complexProcessTable").DataTable();
    let tr = $(this).closest('tr');
    let row = table.row(tr);


    if (row.child.isShown()) {
        row.child.hide();
        tr.removeClass('shown');
        $(this).find('#detailMenuDropdown').removeClass('rotate');
    }
    else {
        row.child(format(row.data())).show();
        tr.addClass('shown');
        $(this).find('#detailMenuDropdown').addClass('rotate');
    }
})
})

1 Ответ

0 голосов
/ 24 февраля 2020

id должен быть уникальным для каждого элемента, поэтому преобразуйте кнопку id="detailMenuDropdown" в class="detailMenuDropdown", а затем измените код, как показано ниже: 

$("#complexProcessTable tbody").on('click', '.detailMenuDropdown', function () {
   //----------------------------------------^use . instead of #
    $(this).toggleClass('rotate'); //toggle class on button
    let table = $("#complexProcessTable").DataTable();
    let tr = $(this).closest('tr');
    let row = table.row(tr);


    if (row.child.isShown()) {
        row.child.hide();
        tr.removeClass('shown');
    }
    else {
        row.child(format(row.data())).show();
        tr.addClass('shown');
    }
})
...