Weblabor

Én csináltam már hasonlót, de ez akkora feladat volt akkoriban, hogy most azt sem tudom, honnan kezdjem...

Kellett nekem egy olyan táblázat, amiben az első oszlopban található nevekben keresni lehet, azaz pozicionálni lehessen a keresési feltételnek megfelelő első sorhoz.

Sok sikertelen elmélet után megtaláltam a megfelelőt, ami annyit tesz, hogy külön kellett választani a folyamatot két fő egységre:

1.) Keresés
2.) Pozicionálás

A keresést én úgy oldottam meg, hogy amikor php-vel előkészítettem a táblázatot, akkor a táblázaton kívül, az első oszlop tartalmát, meghatározott struktúrában, beletettem egy textarea-ba (rejtettbe természetesen). Amikor betöltődött az oldal, volt egy táblázatom, meg egy textarea-m a kereshető adatokkal.

A kereshető adatok halmaza kb. így nézett ki:

{sor:0;nev:Balázs István}{sor:1;nev:Kovács István}{sor:2;nev:Kovács Tamás}

A sor azt jelölte, hogy az a név hányadik sorban van a táblázatban, a név meg egyértelmű.

A keresés úgy zajlott, hogy az első oszlop felett volt egy szövegmező, amibe ha el kezdtem gépelni (onkeyup meg egy kis setTimeout), az indexOf függvénnyel megnéztem, hogy található-e az adathalmazban egyezőség.

Például, ha valaki a Kovács- nevet kereste és beírta azt, hogy „Kov”, akkor az indexOf(„nev:Kov”) szövegrészt kerestettem. Ha volt találat a pozícióból kinyertem a sorszámot, ha nem, alert('Nincs találat!');.

Miután megvolt a sorszám, már csak be kellett azonosítani a sort és megjelníteni. A táblázat php-s előkészítése során minden <tr> azonosítónak megkapta azt a számot, ami a sor is (persze egy kis prefixel)!

Tehát ha már eljutottunk odáig, hogy megvan a találati sor száma, akkor az egyenlő volt a táblázat sorának azonosítójával. Pl.: 9. sor = <tr id=”sor_9”>

Innentől kezdve már azt csinálsz a sorral, amit csak akarsz, hiszen ismered az aznosítóját.

Mellesleg én div-be tettem a táblázatot overflow:auto-val és kiszámoltam, hogy egy sor magassága 35px, tehát ha a a sorszámom 9, akkor a divet a 9*35 re scrolloztam javascriptel.

Hát nagyjából ennyi, de azt még hozzá kell tennem, hogy a „A javascriptet még csak most tanulgatom” az lehet hogy egy kicsit gyenge lesz! :) Nekem ez így működött, kb 1500 sorig tökéletesen!

s_volenszki