如何在數據表的所選行中更改按鈕的類

Question

我在數據表的列內使用按鈕，但是當我選擇一行時，我只想將按鈕的類別從暗改為亮

我的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

單擊tr時，可以使用find和addClass ，如下所示。

$('#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');
});

Answer 2

$('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');
     }
    });