Notifikationer

Markér alle som læst Log ud

Slettet bruger

23. maj 2006 - 11:27 Der er 20 kommentarer og
1 løsning

hover på tr i IE uden Javascript?

Hejsa.

Kan man få :hover til at virke på en tr i en tabel, som også virker i IE, uden brug af Javascript?

Synes godt om

Slettet bruger

23. maj 2006 - 11:30 #1

Men hvis man absolut SKAL bruge Javascript, hvordan skal man så gøre - og samtidig give Javascriptet en slags klasse, så funktionen kun virker på éen tabel og ikke en anden tabel, i samme dokument?

Synes godt om

dotcom1 Nybegynder

23. maj 2006 - 11:32 #2

Kan du bruge denne?
http://www.dynamicdrive.com/dynamicindex11/highlighttable.htm

Synes godt om

dotcom1 Nybegynder

23. maj 2006 - 11:33 #3

Der er også disse:
http://www.alistapart.com/articles/tableruler
http://devcorner.georgievi.net/try-it.php?filename=highlight-row-css

Synes godt om

Slettet bruger

23. maj 2006 - 11:46 #4

dotcom1:
Det må blive løsningen fra:
http://www.alistapart.com/articles/tableruler
fordi jeg kan bruge ID, og derved definere flere tabeller med hver sine egenskaber.

Tak for dine links. :-)

Kast venligst et svar herind, så jeg kan tildele dig points, dotcom1.

Synes godt om

dotcom1 Nybegynder

23. maj 2006 - 11:47 #5

Svar. Velbekomme og tak for points. :)

Synes godt om

Slettet bruger

23. maj 2006 - 12:43 #6

Selv tak. :-)

Synes godt om

olebole Juniormester

23. maj 2006 - 17:51 #7

<ole>

At skifte CSS-klasse på elementer er altid en rigtig skidt idé. I lidt mere komplekse dokumenter, kan det tage sekunder at rendere dokumentet ved den operation.
Browseren skal genberegne hele dokumentet med alle dets arveforhold m.m. og rendere det hvergang ... det giver umådelig dårlig performance.

Man bør i stedet nøjes med at skifte de enkelte style-properties på elementets style-objekt :)

/mvh
</bole>

Synes godt om

Slettet bruger

23. maj 2006 - 20:38 #8

Hejsa igen, Ole! :-)

Øhhh... jeg er ikke 100% med på hvad du mener... men jeg ved da, at flere IDér i samme dokument ikke er særligt korrekt...

Jeg synes tilmed, at koden virker en anelse rodet... og hvis renderingen forøger loadtiden, er det bestemt ikke særligt hensigtsmæssigt!
Hele ideen er nemlig, at jeg skal bruge det til at fremvise en hel del tabulære data i samme dokument - uden at gøre dokumentet unødvendigt tungt.

Så hvis du har en anden og bedre løsning, er jeg MEGET åben overfor at åbne et nyt spørgsmål, og derigennem tildele dig points for en bedre løsning! :-)

Men jeg kan lige poste den midlertidige kode herind, så du selv kan se, hvad jeg har fået barberet den ned til:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Test4</title>

<script type="text/javascript">
function tableruler()
{
if (document.getElementById && document.createTextNode)
{
var tables=document.getElementsByTagName('table');
for (var i=0;i<tables.length;i++)
{
if(tables[i].className=='ruler')
{
var trs=tables[i].getElementsByTagName('tr');
for(var j=0;j<trs.length;j++)
{
trs[j].onmouseover=function(){this.className='ruled';return false}
trs[j].onmouseout=function(){this.className='';return false}
}
}
}
}
}
</script>

<script type="text/javascript">
window.onload=function(){tableruler();}
</script>

<style type="text/css">

table {
margin: 0px auto; }
#list_1 .ruled{
background:#6699cc; }
#list_2 .ruled{
background:#669999; }
</style>

</head>
<body>

<table class="ruler" id="list_1" border="1px">
<tr>
<td>list_1</td>
<td>list_1</td>
</tr>
<tr>
<td>list_1</td>
<td>list_1</td>
</tr>
</table>

<br />

<table class="ruler" id="list_2" border="1">
<tr>
<td>list_2</td>
<td>list_2</td>
</tr>
<tr>
<td>list_2</td>
<td>list_2</td>
</tr>
</table>

</body>
</html>

Synes godt om

olebole Juniormester

23. maj 2006 - 23:55 #9

Det er ikke load-tiden, der forlænges, men renderings-tiden, når man skifter klassen. Du har også helt ret i, at der ikke må være identiske ID'er i dokumentet :)

I stedet for:
ELEMENT.className = "gnu"

- bør du skrive noget à la:
ELEMENT.style.background = "yellow";
ELEMENT.style.color = "red";

- som er væsentligt hurtigere i langt de fleste tilfælde.

Du behøver ikke at spørge på elementets klassenavn, men kan sætte - og teste på - en special attribut (som du gerne må sætte via JS, selvom den ikke ville være valid i det originale HTML-dokument). Noget i stil med:

if (ELEMENT.getAttribut("minDims") != "noget") {
ELEMENT.style.background = "yellow";
ELEMENT.style.color = "red";
ELEMENT.setAttribut("minDims", "noget")
}

- håber, det gav mening. Ellers spørger du bare igen ... og nej, du skal ikke oprette nye spm, p.gr.a. points ;o)

Synes godt om

olebole Juniormester

23. maj 2006 - 23:56 #10

- og det er selvfølgelig 'getAttribute' og 'setAttribute' - med 'e' til slut :)

Synes godt om

Slettet bruger

24. maj 2006 - 10:39 #11

Øhhh... indrømmet: Jeg er totalt faldet af! :-/
Godt nok fatter jeg en lille bitte smule af hvad du skriver, men bestemt ikke nok til selv at kunne sammensætte scriptet.
Er det for meget, at bede dig om at sammensætte scriptet for mig, så det fungerer optimalt, Ole?

I nat sad jeg og gennemtæskede nettet, på en google-søgning på: "tr + hover + javascript", for selv at finde en brugbar løsning.
Og hold da helt fast, for en masse slamkode jeg stødte på! Og ikke éet eneste brugbart eksempel! *suk*
Da jeg havde brugt en del timer - og en hel del kopper kaffe - surfede jeg ind på TV2.dk´s website, for at læse om Basso´s triumf. Og hvad faldt jeg over derinde??? Se selv:
http://sportsresultater.tv2.dk/index.php?stats=true&g=cy&id=100
Den validerer korrekt, og virker fint i både FF, IE og Opera.
Men for søren, hvor ER den kode pakket godt ind imellem alt muligt andet!

...meeeeeeen, jeg satser nu alligevel i første omgang på, at DU er kode-supermand nok til at sammensætte den lille fjollede kodestump for mig, Ole... ;-)

Synes godt om

olebole Juniormester

24. maj 2006 - 11:07 #12

Du kan vel bruge noget à la dette:

<script type="text/JavaScript">
function deHoverTr() {
var css = this.style;
css.background = "";
css.color = "";
}
function hoverTR() {
var css = this.style;
css.background = "yellow";
css.color = "red";
}
function tableruler() {
if (document.getElementById && document.createTextNode) {
var tables=document.getElementsByTagName('table');
for (var i=0;i<tables.length;i++) {
if(tables[i].className=='ruler') {
var trs=tables[i].getElementsByTagName('tr');
for(var j=0;j<trs.length;j++) {
trs[j].onmouseover=hoverTR;
trs[j].onmouseout=deHoverTr;
}
}
}
}
}
window.onload = tableruler;
</script>

Synes godt om

olebole Juniormester

24. maj 2006 - 11:08 #13

Læg iøvrigt mærke til, hvor langsom TV2's script er ... kunne tyde på, de bruger skift af className ;o)

Synes godt om

olebole Juniormester

24. maj 2006 - 11:09 #14

- og at TV2 vælger at bruge skoddende løsninger, betyder jo ikke, Hr. Extend skal ;D

Synes godt om

Slettet bruger

24. maj 2006 - 11:28 #15

Du er da helt vildt god til det dér med kodning, Hr. Ole! ;D
...håber at du sidder et eller andet sted, og tjener kassen!

Men øh... nu er det vel ikke sådan, at scriptet "styrer" alle tabeller? Jeg mener: Det skal nemlig kun fungere på udvalgte tabeller, og ikke andre tabeller i samme dokument.

Du kan se her, hvor jeg er kommet til, indtil nu (dog uden den sidste opdatering):
http://localhost/webfab.dk/11/trae_cykling_links.asp
Scriptet skal kun fungere på de grønne tabeller i midten.

Synes godt om

Slettet bruger

24. maj 2006 - 11:30 #16

Neiii - forkert link! *suk* Her er det rigtige:
http://webfab.dk/trae_cykling_links.asp

Synes godt om

Slettet bruger

24. maj 2006 - 11:33 #17

Og nej, websitet er bestemt ikke færdigt endnu. Kun "Galleri"-delen er færdig.

Synes godt om

Slettet bruger

25. maj 2006 - 12:30 #18

Hejsa igen, Ole! :-)

Ja, scriptet fungerer fint! ...bortset fra, at man mangler at kunne angive en default baggrundsfarve (både "background" og "background-color").

Og jo, jeg HAR gennemprøvet med at angive en CSS-deklaration - og leget med at angive "transparent" også, i begge scripts - alt sammen uden held.

Hvis jeg angiver CSS-deklaration EFTER JavaScriptet, overskriver nådeløst CSSén scriptet - og omvendt. Umiddelbart er det også klart nok, men åbenbart kan problemet heller ikke løses af den vej.

Findes der mon en løsning på at angive en default "background" og "background-color" i JavaScriptet, som angiver baggrundsfarven i tabellen FØR man fører musen hen over tabellen?

Eller hvordan kan man løse det problem, tror du?

Synes godt om

Slettet bruger

25. maj 2006 - 13:00 #19

Måske er det nemmere og mere overskueligt, hvis du kigger på det samlede dokument?
http://webfab.dk/tabel-test10.html

Synes godt om

olebole Juniormester

25. maj 2006 - 15:39 #20

Vi kunne jo gemme den 'gamle' værdi:

function deHoverTr() {
var css = this.style;
css.background = getAttribute("oldBack");
css.color = getAttribute("oldCol");
}
function hoverTR() {
var css = this.style;
this.setAttribute("oldBack", css.background);
this.setAttribute("oldCol", css.color);
css.background = "yellow";
css.color = "red";
}

Synes godt om

roenving Novice

27. maj 2006 - 13:38 #21

Men Kommentar: oleboles 24/05-2006 11:07:17 virker jo netop med default styles, for denne:

function deHoverTr() {
var css = this.style;
css.background = "";
css.color = "";
}

-- vil sætte de værdier der er angivet i stylesheetet på de angivne style-attributter !-)

Synes godt om

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.

Følg dette spørgsmål

Opret Preview

Webudvikling kurser

Vi tilbyder markedets bedste kurser inden for webudvikling

Se alle Webudvikling kurser

Flere spørgsmål fra HTML kategorien

Titel	Indlæg	Oprettet	Seneste aktivitet
Hjælp med HTML og CSS Af Nojsa i HTML	18	10/09/202515:07	17/09/202515:11
CSS 2 x firkanter + tekst på samme linje Af nemlig i HTML	3	19/03/202522:16	20/03/202513:04
Se og ændre html på en webside Af magger i HTML	4	11/03/202513:55	12/03/202506:56
Få input felt, der er med fed skrift og formatteres på linje Af KurtG i HTML	5	02/03/202520:05	04/03/202515:40
Variabler som ikke virker Af Frits Jensen i HTML	3	30/10/202409:37	01/01/202515:27

Se alle spørgsmål i kategorien Opret spørgsmål

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

Alle kategorier på Eksperten

Seneste artiklerRSS