CODEWITHSUNDEEP
javascripthtmlcss
roa765
roa765

Reputation: 295

Remove class before clicking on another table row HTML CSS JAVASCRIPT

The below code retrieves the table html element and contains an onclick function. On this it calls a bunch of functions which works completely fine. The last part of the function is to highlight the table row using the class .primary. There should only ever be one row highlighted with this class. How do I change the function so that it removes the class before you click on another row. At the moment if you click on a row it highlights the entire row yellow. But when you click on another row it also highlights thats one yellow. I just want one row to be highlighted each time:

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;
}

Upvotes: 0

Views: 550

Answers (1)

Farzin Kanzi
Farzin Kanzi

Reputation: 3435

I think you are using jquery. There is a function in jquery that is useful in this cases.

siblings()

siblings selects all the all the elements with same parent. and you can filter it as you wish. https://api.jquery.com/siblings/

In this case you can do this way:

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

Upvotes: 1

Related Questions