jquery高亮和取消高亮表行答案

【问题标题】：jquery highlight and unhighlight table rowjquery高亮和取消高亮表行
【发布时间】：2015-05-06 17:35:49
【问题描述】：

我有一张包含多行的表，我让每行设置一个等级的阴影，甚至设置一个稍微不同的阴影，这样每一行都更容易阅读。

点击事件时，我会用不同的颜色突出显示该行，以便您知道选择了哪条记录，但是当点击不同的行时，我不确定如何将颜色删除/恢复为原来的颜色。

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

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

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

});

【问题讨论】：

您在多个元素 abc 上使用相同的 id。 ID 应该是唯一的。
你每次都重新分配所有行的颜色，这不是一件好事，在加载表格时执行一次

标签： jquery css

【解决方案1】：

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

CSS

.highlight { background-color:yellow }

jQuery

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

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

【讨论】：

【解决方案2】：

当你可以使用类时不要设置样式。

在您的 CSS 中：

.selected {
    background-color: #FFD6F5
}

在你的 JS 中：

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

【讨论】：

【解决方案3】：

试试这个，

在行上简单切换 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>

【讨论】：

【解决方案4】：

一种方法是使用类而不是直接设置 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');
});

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

jsFiddle (live demo)

NB（id 属性）

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

【讨论】：