Mamy sobie tabelkę z wieloma wierszami i kolumnami:

<tr onClick="jakis_kod(IDwiersza)">
<td>xxx</td>
<td>nie klikalny</td>
<td>xxx</td>
<td>xxx</td>
<td>nie klikalny</td>
</tr>

Taki zapis spowoduje, że kliknięcie na wierszu wywoła jakąś akcję w JS.
Chciałbym jednak aby niektóre komórki nie były klikalne. Mógłbym oczywiście
powielać kod JS dla klikalnych komórek lecz wtedy dublującego się kodu
będzie od groma.

Czy da się to zrobić lepiej?

do góry

Hej,

W dniu 2011-11-16 11:17, Marek pisze:
> Mamy sobie tabelkę z wieloma wierszami i kolumnami:
>
> <tr onClick="jakis_kod(IDwiersza)">
> <td>xxx</td>
> <td>nie klikalny</td>
> <td>xxx</td>
> <td>xxx</td>
> <td>nie klikalny</td>
> </tr>
>
> Taki zapis spowoduje, że kliknięcie na wierszu wywoła jakąś akcję w JS.
> Chciałbym jednak aby niektóre komórki nie były klikalne. Mógłbym oczywiście
> powielać kod JS dla klikalnych komórek lecz wtedy dublującego się kodu
> będzie od groma.

Sprawdzaj w funkcji jakis_kod(), czy nie została przypadkiem kliknięta
komórka "nieklikalna". Np poprzez nadanie tym nieklikalnym jakiejś classy.

Nie stosuj onClick, jako atryubutu tagu w HTML. Zainteresuj się DOM /
Unobtrusive Javascript.

--
Pozdrawiam,
Grzegorz Gawlik
http://gregbike.carbonmade.com

do góry

Dnia Wed, 16 Nov 2011 14:52:16 +0100, Gregbike napisał(a):


> Sprawdzaj w funkcji jakis_kod(), czy nie została przypadkiem kliknięta
> komórka "nieklikalna". Np poprzez nadanie tym nieklikalnym jakiejś classy.

Też tak kombinuję właśnie. Jednakże pewien problem stwarza mi nad jaką
komórką znajdował się kursor myszy w chwili gdy kliknięto na wierszu. Czy
wiesz jak to ustalić?

> Nie stosuj onClick, jako atryubutu tagu w HTML. Zainteresuj się DOM /
> Unobtrusive Javascript.

Poniekąd racja. Tak właśnie postępuję dla powtarzalnych na każdej stronie
elementów takich jak menu, integracja z FB itp. Jeśli natomiast coś jest
stosowane na danej stronie a na innej nie, to kod JS sprawdzający czy dana
strona zawiera element, któremu należy "wstrzyknąć" funkcjonalność tworzy
niezłą kobyłę programową przy dużej ilości stron. W takich przypadkach
stosuję kod w tagach. Choć może jest i tego rozwiązanie?

do góry

W dniu 2011-11-16 11:17, Marek pisze:
> Mamy sobie tabelkę z wieloma wierszami i kolumnami:
>
> <tr onClick="jakis_kod(IDwiersza)">
> <td>xxx</td>
> <td>nie klikalny</td>
> <td>xxx</td>
> <td>xxx</td>
> <td>nie klikalny</td>
> </tr>
>
> Taki zapis spowoduje, że kliknięcie na wierszu wywoła jakąś akcję w JS.
> Chciałbym jednak aby niektóre komórki nie były klikalne. Mógłbym oczywiście
> powielać kod JS dla klikalnych komórek lecz wtedy dublującego się kodu
> będzie od groma.
>
> Czy da się to zrobić lepiej?

<tr class="akcja">...</tr>
<tr>...</tr>
<tr class="akcja">...</tr>

Zależnie, co tam używasz, to np.

1. jQuery: $('.akcja').click(i tu np. pointer do Twojej funkcji).
2. document.querySelectorAll('akcja').addEventListener(
'click', tu np.
pointer do Twojej funkcji, false); (to nie zadziała w IE < 8).
3. Petla po tr-ach i sprawdzenie ktory <tr> ma klasę "akcja" i dołączyć
akcję to zdarzenia.

Co tam sobie wolisz :-)

--
Peter

do góry

Dnia Wed, 16 Nov 2011 21:11:07 +0100, Peter May napisał(a):

> Zależnie, co tam używasz, to np.
>
> 2. document.querySelectorAll('akcja').addEventListener(
'click', tu np.
> pointer do Twojej funkcji, false); (to nie zadziała w IE < 8).

To mnie bardzo zaciekawiłeo.

Czy addEventListener nie został wprowadzony dopiero w 9tej wersji IE? Czy
jednym ruchem można przypisać do wszystkich elementów "akcja" konkretne
zdarzenie zamiast robić to iteracyjnie?

do góry

W dniu 2011-11-17 09:58, Marek pisze:
> Dnia Wed, 16 Nov 2011 21:11:07 +0100, Peter May napisał(a):
>
>> Zależnie, co tam używasz, to np.
>>
>> 2. document.querySelectorAll('akcja').addEventListener(
'click', tu np.
>> pointer do Twojej funkcji, false); (to nie zadziała w IE< 8).
>
> To mnie bardzo zaciekawiłeo.
>
> Czy addEventListener nie został wprowadzony dopiero w 9tej wersji IE? Czy
> jednym ruchem można przypisać do wszystkich elementów "akcja" konkretne
> zdarzenie zamiast robić to iteracyjnie?

A, zapomniałem, że addEventListener nie działa dla querySelectorAll.
Natomiast na pewno dla querySelector. Innymi słowy iteracja pozostaje,
jak była i jest :-)

--
Peter

do góry

Dnia Thu, 17 Nov 2011 20:38:23 +0100, Peter May napisał(a):


> A, zapomniałem, że addEventListener nie działa dla querySelectorAll.
> Natomiast na pewno dla querySelector. Innymi słowy iteracja pozostaje,
> jak była i jest :-)

Tylko potwierdź, że querySelector działa pod IE8 :-) Nie mam jak sprawdzić.

do góry

czwartek, 17 listopada 2011 21:48 wielka mądrość na czytelników pl.comp.www
spłynęła, gdy tako rzekł(a) Marek:

> Tylko potwierdź, że querySelector działa pod IE8 :-) Nie mam jak
> sprawdzić.

<http://caniuse.com/queryselector>
<https://developer.mozilla.org/En/DOM/Document.query
Selector>
--
Niżej podpisany, zamieszkały w http://minio.xt.pl ,
Mirosław Zalewski

do góry

W dniu 2011-11-17 21:48, Marek pisze:
> Dnia Thu, 17 Nov 2011 20:38:23 +0100, Peter May napisał(a):
>
>
>> A, zapomniałem, że addEventListener nie działa dla querySelectorAll.
>> Natomiast na pewno dla querySelector. Innymi słowy iteracja pozostaje,
>> jak była i jest :-)
>
> Tylko potwierdź, że querySelector działa pod IE8 :-) Nie mam jak sprawdzić.

http://www.quirksmode.org/dom/w3c_core.html

--
Peter

do góry

Dnia Thu, 17 Nov 2011 22:14:38 +0100, Mirosław Zalewski napisał(a):

> czwartek, 17 listopada 2011 21:48 wielka mądrość na czytelników pl.comp.www
> spłynęła, gdy tako rzekł(a) Marek:
>
>> Tylko potwierdź, że querySelector działa pod IE8 :-) Nie mam jak
>> sprawdzić.
>
> <http://caniuse.com/queryselector>
> <https://developer.mozilla.org/En/DOM/Document.query
Selector>

Dzięki :)

do góry