CSS en javascript aanpassen van een tabel on the fly

[rmfloris]

Ik heb een tabel waar ik door middel van verschillende knoppen de kleurstyle van wil kunnen aanpassen. Dit gebeurd als het waren 'on-the-fly' zonder een reload.

Na de tabel (2x4) staat er een aantal knoppen om de kleur van de rij aan te passen alsmede de kleur van de tekst. De kleur van de rij aanpassen geeft geen probleem, die kan door middel van een GetElementbyID worden aangeroepen en worden aangepast. Deze ID zit dan op de <TR> tag.

Als je dan op dezelfde manier de tekst kleur wilt aanpassen, en je geeft beide <TD>'s in de row hetzelfde ID dan veranderd hij alleen de eerste ID cell. De andere wordt niet aangepast. Het geheel aanroepen via GetElementbyTag zal ook niet werken omdat niet alle <TD> hetzelfde hoeven te worden aangepast.

Dus mijn vraag is, hoe kan ik zowel de rijkleur aanpassen als de tekst kleur / font via een javascript in mjin tabel van 2x4 cellen?

Alvast bedankt voor de hulp.

[crisp]

Je zou de TR ook een class kunnen geven en die aan kunnen passen.

[rmfloris]

crisp schreef op zondag 04 januari 2009 @ 12:51:
Je zou de TR ook een class kunnen geven en die aan kunnen passen.

Ik heb de TR een class gegeven, maar daar loop ik tegenaan, dat ik via javascript mijn class niet kan aanpassen.

[TERW_DAN]

Wat je ook kunt doen is die TR en TDs allemaal een class meegeven en de classnames aanpassen van de elementen (kun je evt doen dmv een getElementsByClassName). Meerdere elementen hetzelfde ID geven gaat niet werken, want een ID moet uniek zijn.

[crisp]

rmfloris schreef op zondag 04 januari 2009 @ 12:53:
[...]

Ik heb de TR een class gegeven, maar daar loop ik tegenaan, dat ik via javascript mijn class niet kan aanpassen.

Tuurlijk wel:

JavaScript:

TRElement.className = 'andereClass';

[rmfloris]

Terw_Dan schreef op zondag 04 januari 2009 @ 12:54:
Wat je ook kunt doen is die TR en TDs allemaal een class meegeven en de classnames aanpassen van de elementen (kun je evt doen dmv een getElementsByClassName). Meerdere elementen hetzelfde ID geven gaat niet werken, want een ID moet uniek zijn.

Klinkt logisch, maar kom er niet helemaal uit.
Ik heb dus mijn tabel waar ik in de TD heb staan class="row1". Deze is ook gedefineerd in mijn css file.

Om de kleur te veranderen heb ik de volgende code opgenomen in een A tag:

code:

<a href="" OnmouseOver="document.getElementsByClassName('row1').style.color = 'FF0000';">link 1.2</a> &nbsp;

Dit zou de tekstkleur moeten aanpassen. Helaas geeft hij zowel in IE als in Firefox een foutmelding. De foutmelding die FF geeft is de volgende:

document.getElementsByClassName("row1").style is undefined

[crisp]

Firefox ondersteund inderdaad native de getElementsByClassName method, maar deze geeft een (live) nodecollection terug, geen enkel element. IE biedt geen native ondersteuning voor getElementsByClassName.

Wat je zou kunnen doen is die 'row1' (mits uniek, maar daar lijkt het wel op) als ID toekennen, en dan dit doen:

JavaScript:

document.getElementById('row1').className = 'kleur1';

De rest vang je dan netjes in CSS op.

[ Voor 36% gewijzigd door crisp op 04-01-2009 13:26 ]

[rmfloris]

De oplossing is een goede, maar de kleur die wordt toegekend aan de row is dynamisch. Men kan zelf een kleur kiezen uit de lijst met kleur danwel een kleur zelf invoeren via een input veld. je kan onmogelijk alle kleuren afdekken in je CSS. Vandaar dat ik op zoek was naar een dynamische oplossing.

[crisp]

Wat werkt hier dan niet aan:

JavaScript:

var row = document.getElementById('row1');
row.style.backgroundColor = '#0000ff';
row.style.color = '#ff0000';

?

[rmfloris]

crisp schreef op zondag 04 januari 2009 @ 13:42:
Wat werkt hier dan niet aan:
?

Het werkt inderdaad. Zo niet over nagedacht. Alleen de achtergrond werkt niet. De kleur wel maar de achtergrond niet. Enig idee hiervoor?

*edit*
Als ik hem op een tweede rij toepas doet hij het wel. Dus niet de eerste rij, maar wel de tweede rij.

*edit 1*
En die werkt nu ook. Ik had de class en de id niet hetzelfde gemaakt. Hierdoor werkte hij niet.

[ Voor 28% gewijzigd door rmfloris op 04-01-2009 13:56 ]

[MueR]

Class en ID hetzelfde maken op TRs? Dat klinkt als iets wat niet kan. Een ID mag namelijk maar 1 keer gebruikt worden, daarom is het een uniek ID.