数据表：使用 JQuery 更改图像单击时的行颜色答案

【问题标题】：Datatables: Change row colour on image click using JQuery数据表：使用 JQuery 更改图像单击时的行颜色
【发布时间】：2014-07-18 10:48:26
【问题描述】：

当我连续单击一个img时使用JQuery，是否可以更改所选行的背景颜色？

谢谢

更新

$('.myLink').click(function() {
    $("#User tbody tr").on('click', function (event) {
           $("#User tbody tr").removeClass('highlightRow');
           (this).addClass('highlightRow');
    });
    $.ajax({
           ...
    });
});

这允许我在单击该行时添加类。我只想在单击图像时在行上添加类。

<table id="User" style="width: 100%;">
      <thead>
           <tr>
                <th>View Information</th>
           </tr>
      </thead>
      <tbody>
           @foreach (var userinfo in Model)
           {
                 <tr>         
                     <td>
                         <img src="/Images/SilkIcons/information.png" alt="Click for more details" class="myLink" title="@userinfo.userID"/>
                     </td>
                 </tr>
           }
      </tbody>
</table>

【问题讨论】：

能否也发布您的 HTML 代码？
是的，这实际上是可能的！ :) 没有任何代码就帮不上忙了！
使用此代码img选中行的点击事件

标签： jquery datatables

【解决方案1】：

更新：

$("#User tbody tr td img").on('click', function (event) {
       $("#User tbody tr").removeClass('highlightRow');
       (this).parent("td").parent("tr").addClass('highlightRow');
});

【讨论】：

@user3849707 你的 html 布局是什么？
我正在使用剃须刀和模型。
我有一个通用布局，这个表格在一个单独的 cshtml 文件中。
我先试试看

【解决方案2】：

使用以下选择器尝试在 tr 之后添加 img

   $("#User tbody tr >img").on('click', function (event) {
       $("#User tbody tr").removeClass('highlightRow');
       (this).addClass('highlightRow');
});

或者

  $("yourImage").on('click', function (event) {
       $(this).parent("tr").addClass('highlightRow');

});

【讨论】：

【解决方案3】：

使用这个

  $("img.myLink").on('click', function (event) {

       $(this).parent("td").parent("tr").addClass('highlightRow');
});

【讨论】：

好的，试试看
尝试使用 live 方法而不是 on

【解决方案4】：

根据您的问题，假设您使用的是 datatables jquery 插件。如果您不使用插件，可能值得研究一下，以使您的生活更轻松。

以下页面应该回答您的问题data tables highlights

代码如下所示

$(document).ready(function() {

var table = $('#User').DataTable();

$('#User tbody')
   .on('click', 'img.myLink', function () {
      var tablecell= $(this).parent("td")
      var rowIdx = table.cell(tablecell).index().row;

      $(table.row(rowIdx).nodes()).addClass('highlight');

   })

});

【讨论】：