如何在数据表的选定行中更改按钮的类

Posted 2023-05-08

【中文标题】如何在数据表的选定行中更改按钮的类

【英文标题】：How to change a button's class in the selected row of a datatable

【发布时间】：2019-09-24 01:28:20

【问题描述】：

我在数据表的列内使用按钮，但是当我选择一行时，我想将类从暗更改为亮，仅用于按钮

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

【参考方案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');
     
    );

【参考方案2】：

点击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');
);

【讨论】：

很高兴为您提供帮助。 :)

sry 但是当我选择另一行时，知道如何将黑暗类放回该行吗？谢谢

删除类 'addClass' 后暗。

谢谢我在你的代码之前添加了这一行 $('.action').removeClass('light').addClass('dark');