在单击另一个表格行之前删除类 HTML CSS JAVASCRIPT答案

【问题标题】：Remove class before clicking on another table row HTML CSS JAVASCRIPT在单击另一个表格行之前删除类 HTML CSS JAVASCRIPT
【发布时间】：2020-11-20 11:58:07
【问题描述】：

下面的代码检索 table html 元素并包含一个 onclick 函数。在此它调用了一堆功能完全正常。该函数的最后一部分是使用 .primary 类突出显示表格行。这个类应该只突出显示一行。如何更改函数以便在单击另一行之前删除该类。目前，如果您单击一行，则会将整行突出显示为黄色。但是，当您单击另一行时，它也会突出显示一个黄色。我只想每次突出显示一行：

var table = document.getElementById("tabledt");
if (table) {
  for (var i = 0; i < table.rows.length; i++) {
    table.rows[i].onclick = function() {
      if (this.classList.contains('selected')) {
        highlightMarker(prevHighlightMarker, false);
        tableText(this);
        highlightMarker(cMarkers[$(this).data('id')], true);
        this.classList.add("primary");
      }
    };
  }
}

.primary {
  background-color: yellow !important;
}

【问题讨论】：

当您收到点击时，从拥有它的元素中删除主要类，除非具有该类的元素是被点击的元素。您应该没有或突出显示一行，而不是 2。
如何从拥有它的元素中删除主要类？ click 函数发生在 table.rows[i].onclick 上，所以我丢失了应用 CSS 的上一行？
var prevSelectedItem = document.querySelector('tr.primary'); 后跟prevSelectedItem.classList.remove('primary');
如果您从未将其设置到任何地方的当前元素，那么拥有var prevHighlightMarker = undefined; 有什么意义？（如果你正确地这样做了，那么你下次就会有对 previous 元素的引用。）

标签： javascript html css

【解决方案1】：

我认为您正在使用 jquery。 jquery 中有一个函数在这种情况下很有用。

siblings()

siblings 选择所有具有相同父元素的所有元素。您可以根据需要对其进行过滤。 https://api.jquery.com/siblings/

在这种情况下，您可以这样做：

$("#tabledt tr").click(function(){
   $(this).siblings('tr').removeClass('primary');
}

【讨论】：