Změna barvy pozadí v buňce tabulky či části stránky

3. září 2001

Na dotaz jednoho ze čtenářů si v tomto článku ukážeme techniku, která se snad bude hodit i mnohým dalším: dynamickou změnu barvy tabulky (případně její buňky, případně celé části stránky) po nějaké akci uživatele pomocí JavaScriptu – například po kliknutí na odkaz.

Ukázku tentokrát najdete na samostatné stránce – klikněte zde a vyzkoušejte si ji.

Technika, kterou je změna barvy docílena, se opírá o HTML tag SPAN – což je na jednu stranu nástroj, jak se s oblibou říká, mocný, na druhou stranu jsou s ním v praxi pořád nějaké problémy: je totiž tak trochu přecitlivělý na správnou syntaxi i na správné zasazení do kontextu stránky. Tak se i na profesionálních stránkách velkých (internetových) firem občas setkáme s tabulkou majestátně plovoucí středem obrazovky a zakrývající vše co je pod ní, nebo naopak „ustřelující“ někam daleko za obzor vymezený obvyklou šířkou stránky. Problémy také dopředu signalizuje to, že prakticky veškerý obslužný skript pro tagy SPAN je nutno psát dvojmo, zvlášť pro každé z rozhádaných dvojčat Internet Exploreru a Navigatoru. Vřele tedy doporučuji před publikováním techniky založené na SPAN testovat, testovat a ještě jednou testovat, nebo uvážit jejich přínos a obratně se jim vyhnout.

Po tomto odrazujícím úvodu zpět k diskutovanému problému. HTML kód tabulky, jejíž buňce měníme barvu, může vypadat třeba nějak takto:

<table bgColor="cyan" border="2" cellpadding="0" cellspacing="0">
    <tr>
        <td><span id="AA" style="position:relative;">Barvu pozadí této buňky měníme</span></td>
    </tr>
    <tr>
        <td>Tato buňka zůstane nezměněna</td>
    </tr>
</table>

Na samotné tabulce není nic neobvyklého, důležitý je samozřejmě onen tag SPAN, použitý v první buňce prvního řádku a zapouzdřující její obsah. Ten vymezuje – nepřesně řečeno – v HTML stránce jakousi „sekci“, pro niž měníme níže uvedeným skriptem barvu pozadí. Atribut id (zde s hodnotou „AA“) určuje jméno oné „sekce“, co se týká inline stylu, ten je potřeba definovat minimálně v uvedeném rozsahu. Pokud definici inline stylu vynecháte, změna barvy nebude pracovat spolehlivě, pokud nějaké parametry stylu přidáte nebo změníte, funkčnost by měla zůstat zachována (testovat, testovat et cetera).

Odkazy, uvedené pod tabulkou, volají JavaScriptovou funkci, která mění barvu buňky tabulky. Místo odkazů lze také použít tlačítka s definovaným handlerem onClick, případně i jiné vymoženosti.

<a href="javascript:changeColor("AA","#FF0000")">Změnit barvu pozadí na červenou</a><br>
<a href="javascript:changeColor("AA","#00FF00")">Změnit barvu pozadí na zelenou</a>

Samotná funkce changeColor je, jak již bylo řečeno, psána dvojmo pro oba nejrozšířenější prohlížeče – první půlka pro Internet Explorer, druhá pro Navigator (ve verzi 6 Navigatoru ale nazafunguje ani jedna, důvody již byly na stránkách Intervalu několikrát diskutovány). První parametr funkce udává jméno „sekce“, pro níž měníme barvu, druhý novou hodnotu barvy – předává se přímo HTML kód barvy. Zde je funkce changeColor:

function changeColor(name,color) {
    if(document.all) {
        var n = document.all[name]         n.style.background = color
    }
    if(document.layers) {
        var n = eval("document."+name)
        n.bgColor = color
    }
}

No a to je pro tentokrát vše, nebo – téměř vše. Zbývá dodat jen pár postřehů (a mnozí z vás určitě v diskusi dodají další):

  • do tagu SPAN lze zapouzdřit daleko více než jedinou buňku tabulky – celou tabulku, obrázky atp – tak lze měnit barvu pozadí pro celé velké části stránky najednou.
  • samozřejmě lze skriptem měnit i další atributy než jen barvu pozadí – mnohé z efektů rolujících a jinak poskakujících textů jsou založeny právě na využití tagu SPAN. Máte-li chuť do experimentování, je právě zde obrovský prostor pro další vylepšování.

Přeji vám příjemný den.

Starší komentáře ke článku

Pokud máte zájem o starší komentáře k tomuto článku, naleznete je zde.

Mohlo by vás také zajímat

Nejnovější

2 komentářů

  1. Martin

    Bře 10, 2013 v 18:24

    Prosím, jak mám v java udělat: k datu přiřadit nějakou barvu pozadí tabulky (třeba 1.1. = zelená, 2.1. = modrá,…)?

    Já použil toto, ale nefunguje to:
    todey = new Date();
    den=todey.getDate();
    mesic=(todey.getMonth()+1);
    if (mesic==1) {
    if (den==01) document.bgcolor(„bílá“);

    if (den==31) document.bgcolor(„“);
    }

    Děkuji za radu.

    Odpovědět
  2. kolemjdoucí

    Bře 13, 2013 v 13:43

    obarvení tabulky (s id=mojetab) se dělá např. tímhle příkazem:

    document.getElementById(„mojetab“).bgColor=“white“;
    document.getElementById(„mojetab“).bgColor=“lightgreen“;

    Odpovědět

Napsat komentář

Vaše e-mailová adresa nebude zveřejněna. Vyžadované informace jsou označeny *