Avatar billede neoman Novice
18. maj 2007 - 12:44 Der er 15 kommentarer og
1 løsning

Gøre en hel tabelcelle klikbar

En tabelcelle med skal indeholde følgende

    1. et "felt" som er en firkant height:8px;width8:px og feltets farve sætter jeg selv runtime
    2. i nogle tilfælde et bogstav ved siden af feltet, f.eks. A
    3. i nogle tilfælde endnu et bogstav ved siden af det forrige, f.eks. B, med farve/text-decoration separat sat og afvigende fra A



så alt i alt : xAB, hvor x står for mit "felt" , og A&B A & B  skal ikke se klikbare ud på nogen måde.


Jeg har en virkende implementering, hvor mit "felt"er klikbart:

    x= <input type=button> hvor størrelsen af knappen og farven sættes ved ved at jeg vælger           css-klasse  når jeg skriver html'en i mit program
    A&B ligger indtil videre i samme SPAN element tilføjet cellen

Mit  klikbare "felt" er i praksis for lille til nemt at kunne klikke på , og hele cellen skal derfor helst være klikbar.

Jeg har set at  man kan få et <A> til fylde en hel celle ud med display:block, men hvordan gør man dette når der også ligger andre elementer i cellen - kan man det i det hele taget ?


Eller er det eneste alternativ at tilføje noget javascript til <td> elementet ?
Avatar billede w13 Novice
18. maj 2007 - 12:47 #1
Jeg tror umiddelbart du kan lægge en javascript-onclick på din td, ja. Hvad skal der ske ved klik?
Avatar billede neoman Novice
18. maj 2007 - 12:58 #2
Et klik på mit "felt" trigger en postback, hvor jeg laver en masse processing server-side, og det er jeg ganske tilfreds med. Skal egentligt opnå det samme med hele cellen.

Jeg havde håbet at kunne bruge de "normale" elementer til at trigge det med, fordi jeg ved hvordan jeg skal identificere kilden til postback  når jeg er tilbage på serveren(dvs hvilken af alle mine knapper, som der blev klikket på).

Med en klikbar tabelcelle skal jeg lige regne ud hvordan jeg på serveren kan finde ud af hvilken celle det var. Jeg kan/vil naturligvis give den et ID - og så er det vel blot at finde den i request.form.
Avatar billede roenving Novice
18. maj 2007 - 13:07 #3
<a style="display:block;float:left;height:8px;width:8px;background:#17f;line-height:8px;font-size:6px;">&nbsp;</a>
Avatar billede neoman Novice
18. maj 2007 - 15:07 #4
Vil kigge på det - vender tilbage, dog nok først i morgen. Havde bakset med noget a la roenvings løsning, men kunne ikke få den til at spænde over HELE cellen, når der også lå andre ting i cellen.
Avatar billede roenving Novice
18. maj 2007 - 15:14 #5
Nej, det kan du jo ikke ...

-- men jeg forstår ikke, at du siger, at de andre elementer i cellen ikke skal være klikbare, men hele cellen skal ?-)
Avatar billede neoman Novice
19. maj 2007 - 14:18 #6
roenving - jeg har ikke foklaret det godt nok vist. Jo det hele skal være klikbart, ønskede dog ikke at A og eller B skulle se ud som et link med f.eks.  underline.

Det hele skal virke i IE 6, 7 og FF

Hvis jeg gør hele cellen klikbar med JS, så har jeg det problem, at jeg ikke ved hvordan jeg skal ændre cursor til Pointer - det som sker automatisk hvis man har et anchor element. Det ser ud til, at der ikke findes noget hover event for TD'er. Nogen ideer ? (Det er ikke alle celler i tabellen som bliver klikbare, eller har indhold, så det er noget der skal implementeres per celle).

I min nuværende imperfekte løsning kan jeg få et hover over min lille firkant i FF, mens IE 6 kun laver hover  over anchors ..grrr - har set fif ude på nettet med "behaviours" osv, for at tackle IE 6 - men det er lidt for meget synes jeg.

Indtil videre så synes w13's forslag at være den eneste farbare vej - er det rigtigt ?
Avatar billede roenving Novice
19. maj 2007 - 14:45 #7
<td onclick="noget();" style="cursor:pointer;">
Avatar billede neoman Novice
19. maj 2007 - 19:14 #8
Jeg kan få det til at fungere - altså det med at klikke på en hel celle ved at gøre <td onclick="noget();" style="cursor:pointer;">

Min knap (den der 8x8px ting) havde en funktion før-  det var at i CSS lave en lille sort/hvis eller grå firkant. Hvis jeg nu ikke skal bruge knappen til at klikke på, så er den jo lidt overflødig. Men hvordan kan jeg lave en 8x8px firkant i css ?Jeg kunne godt nok bruge en gif, men det vil jeg helst slippe for.
Avatar billede roenving Novice
20. maj 2007 - 12:57 #9
Bare lav et element med den størrelse, men husk detaljen om line-height og font-size, så de ikke kaommer til at bestemme størrelsen:

<div class="lilleFirkant">&nbsp;</div>

.lilleFirkant{width:8px;height:8px;background:#17f;line-height:0px;font-size:0px;}
Avatar billede roenving Novice
20. maj 2007 - 12:57 #10
-- og så måske også float:left; !-)
Avatar billede neoman Novice
20. maj 2007 - 14:20 #11
Mange tak for hjælpen - det vil jeg fluks prøve (fluks efter at have udraderet dagens  høst af bugs) :)

Læg venligst svar.
Avatar billede roenving Novice
20. maj 2007 - 14:33 #12
Velbekomme '-)
Avatar billede roenving Novice
20. maj 2007 - 14:34 #13
-- husk også w13 !-)
Avatar billede neoman Novice
20. maj 2007 - 14:39 #14
vi afventer spændt w13 :)
Avatar billede w13 Novice
20. maj 2007 - 14:40 #15
Ellers tak, jeg springer bare over denne gang. =) Roenving har gjort lidt mere end jeg har her.
Avatar billede roenving Novice
20. maj 2007 - 15:34 #16
Tak for point ;~}
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester