jQuery突出显示和取消突出显示的表行 [英] jquery highlight and unhighlight table row

问题描述

我有一个包含多行的表，我为每一个奇数行设置了一个等级的阴影，甚至还有一个略有不同的阴影，因此每一行都更易于阅读.

I have a table with multipul rows, i have each odd row set one shade of grade and the even a slight different shade so each row is easier to read.

在发生单击事件时，我正在用另一种颜色突出显示该行，以便您知道已选择了哪条记录，但是在单击另一行时，我不确定如何将颜色恢复/还原为原始颜色.

Upon click event i am highlighting that row with a different colour so you know which record has been selected, however when clicking a different row I'm unsure how to delect/revert the colour back to its original.

相反，我要做的就是作弊?！并将所有行设置回交替的灰色，然后将新的突出显示的颜色应用于选定的行.

Instead I'm what I'm having todo is cheat?! and set all the rows back to the alternate grey colours, and then apply the new highlighted colour to the selected row.

我想知道是否有更好的方法可以做到这一点.

I was wondering if there is a better way to do this.

$(document).on("click","#div2 tr#abc", function(event) {

    barcode = $(this).data('barcode');

    $('tr:odd[id="abc"]').css('backgroundColor', '#FAFAFA');
    $('tr:even[id="abc"]').css('backgroundColor', '#F2F2F2');

    $(this).css('backgroundColor','#FFD6F5');

});

推荐答案

尝试一下，

对行中的CSS类进行简单的切换即可完成您的工作.

a simple toggle of css classes on rows will do your work.

$(document).on("click","tr", function(event) {

  $('tr').removeClass('active');  
  $(this).addClass('active');

});

tr:nth-child(even) {background: #F2F2F2}
tr:nth-child(odd) {background: #FAFAFA}


td{ width:200px; height:20px;border:1px solid black;}


tr.active{background:#FFD6F5};

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td>
      </td>
    <td>
      </td>
    
    </tr>
  <tr>
    <td>
      </td>
    <td>
      </td>
    
    </tr>
  <tr>
    <td>
      </td>
    <td>
      </td>
    
    </tr>
  <tr>
    <td>
      </td>
    <td>
      </td>
    
    </tr>
  <tr>
    <td>
      </td>
    <td>
      </td>
    
    </tr>
  <tr>
    <td>
      </td>
    <td>
      </td>
    
    </tr>
    </table>

这篇关于jQuery突出显示和取消突出显示的表行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！