如何为 dataTable 中的不同操作选择图像？

Posted 2023-05-09

【中文标题】如何为 dataTable 中的不同操作选择图像？

【英文标题】：How select images for diferents actions in dataTable?

【发布时间】：2020-05-12 07:36:30

【问题描述】：

我制作了一个数据表，每行包含数据项和两个图标图像，一个用于将项目标记为收藏，另一个图标用于通过单击报告未经授权的项目。所以，有两个不同的动作取决于点击的图标。标记为收藏的jquery代码在里面吗

 $(document).ready(function() 
            var table = $('#myTable').DataTable();
             $('#myTable tbody').on( 'click', 'img', function () 
            //mark as favourite
             

但这对两个图标都有效，我如何区分它们？

【参考方案1】：

您只使用 img 标签来选择它们。你需要添加一个类名来区分动作。

还有一个自定义数据属性，如 data-id 属性，它是我们以后可以用来识别目标项目（数据库 ID）的值，并且可以在您使用 ajax 填充 Datatable() 时添加（like here）或者用 php...

<img src="fav.png" class="fav" data-id="12"><img src="flag.png" class="flag" data-id="13">

在你的脚本中：

         $(document).ready(function() 
                    var table = $('#myTable').DataTable();
                     $('#myTable tbody').on( 'click', '.fav', function () 
                    //mark as favourite 
    //to use the ID of that item you need another row identifier for your function 
    var id=$(this).data('id');
                     
                     $('#myTable tbody').on( 'click', '.flag', function () 
                    //Report that...
    var id=$(this).data('id');
                     
);

【参考方案2】：

看了https://api.jquery.com/multiple-selector/后找到了解决办法 为图像赋予不同的类名，然后您就可以选择它们。

<img class='fv'>

对于最喜欢的图标和

<img class='cs'>

对于审查图标，您可以相应地选择它们。

$('#myTable tbody').on( 'click', 'img.fv', function () 
        //mark as favourite
         
$('#myTable tbody').on( 'click', 'img.cs', function () 
        //mark as unapropiated
         

就是这样。