Как изменить класс кнопки в выбранной строке таблицы данных

Question

Я использую кнопки внутри столбца в datatable, но когда я выбираю строку, я хочу изменить класс с темного на светлый только для кнопок

Мой JavaScript:

 var table =$('#quittances').DataTable({
    processing:true,
    serverSide:true,
    select : true,
    order :[],
    ajax:{
        url: url,
    },
    columns:[
        {data: 'reste',name: 'reste'},
        {data: null,render: function ( data, type, row ) {
    var btn1 = '<button type="button" class="action btn btn-icon btn-pure dark" style="margin-right:10px;"><i class="la la-eye"></i></button>';

    var btn2 = '<button type="button" class="action btn btn-icon btn-pure dark"data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">'
        +'<i class="la la-gear"></i></button>';
    var x = '<div class="dropdown-menu" x-placement="bottom-start" style="position: absolute; transform: translate3d(0px, 40px, 0px); top: 0px; left: 0px; will-change: transform;">'
    +'<a class="dropdown-item" href="#">Espèces</a>'
    +'<a class="dropdown-item" href="#">Chèque/Traite</a>'
    +'<a class="dropdown-item" href="#">TPE</a>'
    +'<a class="dropdown-item" href="#">Virement</a></div>';



    return '<div style="display:flex;justify-content:center;align-items:center;" class="row">'+btn1+btn2+x+'</div>';
}}
    ]
});

Мой HTML:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<table class="table table-striped table-bordered bootstrap-3" id="quittances" role="grid" aria-describedby="user_table_info" width="100%">
  <thead>
    <tr role="row">
      <th class="sorting" tabindex="9" rowspan="1" colspan="1">Reste</th>
      <th class="sorting" tabindex="10" rowspan="1" colspan="1" style="min-width: 80px;">Action</th>
    </tr>
  </thead>
</table>

Answer 1

$('th').on('click', function(){
 if($(this).hasClass('sorting')){
    $(this).removeClass('sorting').addClass('lighterVersion');
  }
 else{
    $(this).removeClass('lighterVersion').addClass('sorting');
 }
});

если вы нажмете еще раз, вы можете вернуть свой код с помощью else ..

Мой код показывает пример для "th", если вы хотите, чтобы весь ряд был светлее, чем:

  $('tr').on('click', function(){
     if($(this).find('td').hasClass('sorting')){
        $(this).find('td').removeClass('sorting').addClass('lighterVersion');
      }
     else{
        $(this).removeClass('lighterVersion').addClass('sorting');
     }
    });

Answer 2

Вы можете использовать find и addClass при нажатии на tr, как показано ниже.

$('#quittances tbody').on('click', 'tr', function() {
 $('#quittances tbody tr td').find('.action').removeClass('YourNewClass'); //Remove other class before add class.
 $(this).find('.action').addClass('YourNewClass');
});