Highlight Table Row Class on Separate Click - CSS-Tricks

This topic is empty.

Viewing 4 posts - 1 through 4 (of 4 total)

Author

Posts

March 16, 2019 at 7:57 pm #284946

Participant

I’m creating an availability calendar for a mock resort. The idea is that the resort has cabins numbered 0 – 7 and each cabin can be reserved from Saturday afternoon one week and checkout Saturday morning the following week. I want the default setting to be unavailable with the table row background being a light shade of red. I’m trying to figure out how to set up the code to have a clicked/active “Cabin 1” button show all of the table rows in which Cabin 1 was available. Then the same with the other Cabins.

So I figured that I’d have a css class “unavailable” [bg-color: red] as the first class then add “c0 c1 c2 c3, etc” [bg-color: green] as classes to override to the unavailable class with the green background.

In the example below I have the table row ID=”may18-may25″ which should highlight green when Cabin1 (c1) Cabin2 (c2) or Cabin3 (c3) are clicked, but when every other button is clicked it shows the class=”unavailable” red background.

I am clueless with javascript and can understand a little bit when reading it, but can’t write a lick. If there is a pure css way to do this, I’d much rather do that, but this seems to be a method for only javascript.