Výběr více řádků v tabulce

4. listopadu 2002

•

Jak lze nechat uživatelem vybrat několik řádků v tabulce a zvýrazněné řádky pak odeslat prostřednictvím formuláře? Podívejme se na řešení využívající poměrně elegantní techniku, která bude určitě povědomá například uživatelům databázového rozhraní phpMyAdmin. Příklad je však určen pouze pro MSIE.

Nejprve si prohlédněte ukázku požadovaného chování. Pokud přejedete myší nad tabulkou, aktuální řádek se zvýrazňuje zeleně. Kliknutím můžete takto vybraný řádek zahrnout do výběru nebo naopak z výběru odstranit. Všechny vybrané řádky jsou zvýrazněny oranžově. Po kliknutí na tlačítko „Odeslat“ vypíše ukázkový skript, které řádky byly vybrány.

Příprava tabulky a formuláře

Nejprve musíme připravit HTML tabulku, kterou budeme zvýrazňovat, a formulář, jenž bude použit k odeslání výsledků. V následujícím příkladu je vypsán potřebný HTML kód (pro stručnost pouze pro dvouřádkovou tabulku). Všimněte si volání funkce setPointer() v „myších“ událostech na jednotlivých řádcích tabulky. Dále stojí za povšimnutí, že při odesílání formuláře využíváme handleru události onSubmit. Zde je tedy slíbený kód:

<form onSubmit=“SubmitIt();“>
<table>
    <tr
    onmouseover=“setPointer(this, 1, ‚over‘);“
    onmouseout=“setPointer(this, 1, ‚out‘);“
    onmousedown=“setPointer(this, 1, ‚click‘);“>
    <td bgcolor=“#DDDDDD“>123</td>
    <td bgcolor=“#DDDDDD“>Text</td>
    <td bgcolor=“#DDDDDD“>Jiný text</td>
    </tr>
    <tr
    onmouseover=“setPointer(this, 2, ‚over‘);“
    onmouseout=“setPointer(this, 2, ‚out‘);“
    onmousedown=“setPointer(this, 2, ‚click‘);“>
    <td bgcolor=“#DDDDDD“>12423</td>
    <td bgcolor=“#DDDDDD“>Text</td>
    <td bgcolor=“#DDDDDD“>Další text</td>
    </tr>
</table>
<p><input type=“Submit“ name=“s“ value=“Odeslat“></p>
</form>

Funkce setPointer

Javaskriptová funkce setPointer zodpovídá za dva úkoly. Zaprvé zabezpečuje všechna potřebná barevná zvýraznění, zadruhé ukládá do pomocné proměnné informaci o tom, které řádky tabulky byly vybrány. Nejprve si ukážeme její celý kód, včetně deklarace pomocných proměnných:

Dvě pomocná pole marked_row a highlight_row slouží k ukládání dat o tom, který řádek tabulky je vybrán, respektive zvýrazněn. Trojice proměnných (či lépe konstant) theDefaultColor, thePointerColor a theMarkColor určuje použité barvy. Ubezpečte se vždy, že barva zadaná jako theDefaultColor odpovídá barvě pozadí jednotlivých buněk, zadaných v HTML kódu výše, jinak po prvním přejetí myší nad tabulkou dojde k „nevysvětlitelnému“ přebarvení tabulky.

V samotné funkci setPointer slouží první podmínka k ukončení funkce v prohlížečích, které nedisponují potřebnými schopnostmi. Následuje získání odkazů na buňky tabulky v aktuálním řádku a inicializace pomocných lokálních proměnných.

Další tři podmínky, testující parametr theAction, vybírají vhodnou barvu, kterou bude vykreslen aktuální řádek, a aktualizují pomocné pole marked_row. Toto pole obsahuje data o tom, které řádky tabulky byly kliknutím vybrány.

Posledních pět řádků funkce má na starost samotné vykreslení zvolené barvy pozadí do všech buněk tabulky na aktuálním řádku.

Parametry funkce setPointer mají tento význam:

theRow – ukazatel na aktuální řádek (ve volání použijte „this“ klauzuli).
theRowNum – číslo řádku. Nesmí obsahovat duplicity, jinak dojde k zmatečnému chování. Doporučuji vzestupné číslování od nuly nebo jedničky, podle toho, jak jste zvyklí.
theAction – akce, kterou uživatel provedl; může nabývat tří hodnot: over (pohyb myší nad řádkem), out (pohyb myší ven z řádku) a click (kliknutí). Jak tento parametr používat je zřejmé z HTML kódu uvedeného výše.

Odeslání formuláře

Doposud uvedený kód zajistí kompletní vybarvování jednotlivých řádků tabulky v závislosti na uživatelských akcích. To nám ovšem nestačí, získané informace potřebujeme ještě z formuláře korektně odeslat. Po odeslání formuláře proto voláme další javaskriptovou funkci se jménem SubmitIt, která z pomocného pole marked_row zjistí, které řádky tabulky byly uživatelem označeny. Co s těmito daty poté udělá, závisí na konkrétní implementaci. Zde v příkladu požadujeme pouze zobrazení čísel vybraných řádků do okénka, nejobvyklejším praktickým použitím zřejmě bude přepis těchto čísel ve vhodném formátu do skrytého pole formuláře a odeslání ke zpracování. Zde je tedy kód funkce SubmitIt použitý v ukázce:

function SubmitIt(){
    var t=“Vybrány byly tyto řádky: \n“;
    var i;
    for(i=0;i<marked_row.length;i++) {
        if(marked_row[i]) t+= i + „, „;
    }
    t += „\n\n<konec výpisu>“;
    alert(t);
}

Uvedené funkce lze po jistých modifikacích použít i v jiných prohlížečích než je Internet Explorer, znamená to ovšem obejít se bez efektního podbarvování řádků a označení vybraných řádků řešit jiným způsobem, platformově méně závislým, například dvojicí obrázků „vybráno“, „nevybráno“ v prvním sloupci tabulky a jejich programovou záměnou. Budete-li mít zájem, můžeme si podobné variace ukázat v případném příštím článku.