Question

我有一个带有多行的表，我将每个奇数行设置为一个等级的阴影，甚至是一个略微不同的阴影，因此每行更容易阅读。

点击事件后，我突出显示具有不同颜色的行，以便您知道哪个记录已被选中，但是当点击其他行时，我不确定如何将颜色设置/恢复为原始颜色。

相反，我是我的东西是欺骗？！并将所有行设置回备用灰色，然后将新突出显示的颜色应用于所选行。

我想知道是否有更好的方法来做到这一点。

$(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');

});

Answer 1

我建议您使用css类而不是使用css()函数：

CSS

.highlight { background-color:yellow }

的jQuery

在行上单击，从所有行中删除highlight类，然后将此类添加到单击的行中：

$('#yourTable tr').on('click', function() {
   $('#yourTable tr').removeClass('highlight');
   $(this).addClass('highlight');
});

Answer 2

当你可以使用课程时，不要设置样式。

在你的CSS中：

.selected {
    background-color: #FFD6F5
}

在你的JS中：

$(document).on("click","#div2 tr", function(event) {
    $('tr').removeClass('selected');
    $(this).addClass('selected');
});

Answer 3

一种方法是使用类而不是直接设置css属性：

css（条款的顺序很重要;请参阅Rory McCrossan的答案，如何以不同的方式处理基线着色）：

.color-even { background-color: #F2F2F2; }
.color-odd  { background-color: #FAFAFA; }
.color-hilite { background-color: #FFD6F5; }

JS：

$(document).ready( function() {
    //...
    $('tr:even').addClass('color-even');
    $('tr:odd').addClass('color-odd');
    //...
});

//...

$(document).on("click","#div2 tr", function(event) {
    barcode = $(this).data('barcode');

    $('.color-hilite').removeClass('color-hilite');
    $(this).addClass('color-hilite');
});

如果您允许选择多行，请移动＆＃39; removeClass＆＃39;代码中您处理取消选择单个行或所有行的位置的方法。

jsFiddle (live demo)

NB（id属性）

在点击处理程序的选择器中，您使用tr＆＃39; abc＆＃39;来限定id元素。鉴于你的问题，这没有任何意义，因为你会挑出一个特定的行来附加你的处理程序。也许你在不同的行上重复使用相同的id值？这违反了ids的目的，改为使用类。你可以在一个class属性中堆积尽可能多的类（用空格分隔;没有方便代码处理它会变得有点麻烦，但无论如何都使用jquery）。

Answer 4

试试这个，

在行上简单切换css类就可以了。

$(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 highlight和unhighlight table row

4 个答案: