Question

单击行中的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>

Answer 1

使用以下选择器尝试在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');

});

Answer 2

更新

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

Answer 3

从你的问题我假设你正在使用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');

   })

}）;

Answer 4

使用此

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

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

数据表：使用JQuery更改图像上的行颜色

4 个答案:

更新