Autor Zpráva
hypot
Profil
Dobrý den, nevím si rady s následujícím problémem:
chtěl bych, aby se po kliknutí na konkrétní buňku v určitém sloupci tabulky změnila barva pozadí této buňky, a to na barvu přiřazenou danému sloupci (jinými slovy aby se barva pozadí kterékoli buňky ve druhém sloupci po kliknutí změnila na zelenou, kterákoli buňky ve třetím sloupci na červenou atd.). Problém je v tom, že nevím, jak označit, že chci pracovat právě s buňkou, na kterou se kliklo. Jediné, co mě napadlo, je přiřadit každé buňce v určitém sloupci ID a přes událost onclick jí přiřadit speciální funkci, jenže to je příliš těžkopádné, protože bych pořád dokola opakoval tutéž funkci lišící se jen ID dotyčné buňky. Lepší mně přijde dát buňkám v určitém sloupci stejnou třídu, ale i tak nevím, co dál.
Budu vám vděčný za nápovědu. Děkuji.
Dusann
Profil
hypot:
Problém je v tom, že nevím, jak označit, že chci pracovat právě s buňkou, na kterou se kliklo

V event handleri môžeš použiť event.target, toto odkazuje na element, na ktorom prebehla udalosť click.

Takto si predtavuješ funkčnosť ? Živá ukázka
hypot
Profil
Aha, o event.target jsem nevěděl.
Jo, přesně tak si funkčnost představuju. Jen teď pro změnu nechápu to CSS. Jak to funguje, je mi jasné: buňkám se přiřadí jednak barevné pozadí, jednak bílé pozadí, které překrývá barvu; po kliknutí se bílé pozadí nahradí průhledným a tím se zviditelní barva vespod. Jenže mi není jasné, proč - když se buňkám přiřadí dvě pozadí - se zrovna bílé pozadí po načtení stránky upřednostní (a je jakoby navrchu).
Dusann
Profil
hypot:
Jenže mi není jasné, proč - když se buňkám přiřadí dvě pozadí - se zrovna bílé pozadí po načtení stránky upřednostní (a je jakoby navrchu).

Pretože background sa v tabuľke aplikuje v hierarchických vrstvách. Každý typ elementu (tag) v tabuľke má v tejto vrstve určité poradie, ktoré je:

TABLE --> COLLGROUP --> COL --> ROWGROUP (thead,tfoot,tbody) --> ROW (tr) --> CELL (td,th)
hypot
Profil
Přece jen mám ještě dotaz:
Když upravím vzhled tabulky přidáním tr:nth-child(even) td {background-color: lightgrey;}, změní se po kliknutí jen pozadí buněk sudého řádku. Proč ne i těch v lichých řádcích?

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: