Alter Backgroundcolor of a Collection Item

Hi
I’m testing Webflow to see if it fits my needs.

The main goal is to achieve something like this: erlin.ch (go to “Angebot”)
Do you think this is possible with Webflow?

There is an interaction between the SVG-Graphic (the house) and the pricelist.
And users can filter the pricelist for specific arguments.

My first banal question on this journey is:
I made a Collection for the price and a Collection List Wrapper to display the data in a Table.
How can I alternate the Backgroundcolor of each row of the Table?

Kind regards
Alain


Here is my site Read-Only: https://my-easy-test-project.webflow.io/

Post Edit: I had not visited the site when I answered.

The site you provided as a reference has a background color change on hover. That can be done right in the designer.

-------------- Original Answer --------------------

Assumption: How can I alternate the Backgroundcolor of each row of the Table?

You could do that with custom code targeting the collection list item wrapper.

Using JQuery it would look like this:

$(".collection-list-item.w-dyn-item:odd").css("background-color","#eaeaea");

I would give the wrapper a custom class and use that instead of the default created by webflow that I targeted here.

You would place that code inside a JQuery doc ready function inside of a script tag in the template’s before body close section.

Using custom code → Custom code in head and body tags - Webflow University Documentation

Thanks for the tip.

Unfortunally I’m testing on the free Version of Weblow which does not allow custom code.

No need for custom code for hover state changes.

I do not mean the hover state.
I mean for example that the first row is white, the second is blue, the third is white again and fourth blue again and so on.
I guess that is what your first codesnipet does, right?

That is what I wrote the code for, alternating row colors.

Thanks again. Alterning the background-color of a row works now.

The journey goes on:
How can I interact with the SVG-Elements of the houses?
When I hover a row of the table then the corresponding item of the housegraphic shoud be hightlighted.
How can I do that?

Here is some information on the topic.

Thanks.
Now I can change the fill-color of an SVG-Element when hovering it.

But how can I change the fill-color of specific SVG-Element (it has an id) when hovering a specific table row?