CIO Tech Eksperten IT-JOB IT-Kurser Events Podcast Søg

Log ind eller opret profil

Du kan også logge ind via nedenstående tjenester

dreyfusdk Nybegynder

19. marts 2006 - 18:25 Der er 11 kommentarer og
1 løsning

Gem javascript-ting i fil

Hej,

Jeg har en masse tabeller på min hjemmeside hvor der er en effekt på hver eneste kolonne. Jeg benytter denne kode på mine kolonner:

<table>
<tr>
<td ONMOUSEOVER="this.style.backgroundColor='WHITESMOKE'; return true;" ONMOUSEOUT="this.style.backgroundColor=''; return true;">
En eller anden tekst...
</td>
</tr>
</table>

Det er jo meget fancy, men det gør at siden fylder en del + det gør det besværgeligt hvis jeg på sigt ønsker at ændre fx. farven e.lig.

Mit spørgmål går derfor på, hvordan kan jeg styre det (hvilken kode skal der til) fra central hold - fx. fra en javascript fil eller stylesheet for at det er mest optimalt?

Venlgi hilsen

- Magnus

Synes godt om

mclemens Nybegynder

19. marts 2006 - 18:52 #1

Sådan her?

"filnavn.html"

<html><head>

<script type="text/JavaScript" language="JavaScript" src="si.js"></script>

</head>

<body onLoad="showit();">

<table>
<tr>
<td>
En eller anden tekst...
</td>
</tr>
</table>
</body></html>

samt "si.js"

function showit() {
alert(document.body.innerHTML);

document.body.innerHTML=document.body.innerHTML.replace(/<td/gi, "<td ONMOUSEOVER=\"this.style.backgroundColor='WHITESMOKE'; return true;\" ONMOUSEOUT=\"this.style.backgroundColor=''; return true;\"");

alert(document.body.innerHTML);
}

Synes godt om

mclemens Nybegynder

19. marts 2006 - 18:55 #2

eller hvis du har flere tables så definer de td's der skal have js værdien tildelt med class="si"...

"filnavn.html"

<html><head>

<script type="text/JavaScript" language="JavaScript" src="si.js"></script>

</head>

<body onLoad="showit();">

<table>
<tr>
<td class="si">
En eller anden tekst...
</td>
<td>
En eller anden tekst... der ikke får baggrund
</td>
</tr>
</table>
</body></html>

"si.js"
function showit() {
alert(document.body.innerHTML);

document.body.innerHTML=document.body.innerHTML.replace(/<td class=si/gi, "<td class=\"si\" ONMOUSEOVER=\"this.style.backgroundColor='WHITESMOKE'; return true;\" ONMOUSEOUT=\"this.style.backgroundColor=''; return true;\"");

alert(document.body.innerHTML);
}

Synes godt om

mclemens Nybegynder

19. marts 2006 - 19:12 #3

Åh, jo m.h.t. css fidusen så kan det ikke gøres da :hover kun virker på links...
Her er et eksempel på at det ikke virker ;) - js er vejen man må gå :/ ... medmindre det havde været til en menu selvfølgelig ...

<html><head><style>
p.bg{color:black;background-color:white;}
p.bg:hover{color:black;background-color:whitesmoke;}

a.bg{text-decoration:none;display:block;color:black;background-color:white;}
a.bg:hover{display:block;color:black;background-color:whitesmoke;}
</style></head><body>

<table><tr>
<td ><p class="bg">tekst</p></td>
<td ><a href="#" class="bg">tekst</a></td>
</tr></table>
</body></html>

Synes godt om

dreyfusdk Nybegynder

19. marts 2006 - 19:30 #4

Super, jeg har fået det til at fungere med JS :-) Sparer en del på både loadtider og trafikudgifter :-p

Men kan det passe at det ikke fungerer i Firefox?

Synes godt om

mclemens Nybegynder

19. marts 2006 - 19:55 #5

Men kan det passe at det ikke fungerer i Firefox?
.. checker lige - det kan vi jo ikke have :P

Synes godt om

mclemens Nybegynder

19. marts 2006 - 19:57 #6

ja, hov script to duer ikke... kigger lige på den plus de alerts skal vist også lige fjernes de blev brugt til at teste med :/

Synes godt om

mclemens Nybegynder

19. marts 2006 - 20:04 #7

Ny .js fil --- prøver lige en comprimere den lidt...

function showit() {
document.body.innerHTML=document.body.innerHTML.replace(/<td class="si"/gi, "<td class=\"si\" ONMOUSEOVER=\"this.style.backgroundColor='WHITESMOKE'; return true;\" ONMOUSEOUT=\"this.style.backgroundColor=''; return true;\"");

document.body.innerHTML=document.body.innerHTML.replace(/<td class=si/gi, "<td class=\"si\" ONMOUSEOVER=\"this.style.backgroundColor='WHITESMOKE'; return true;\" ONMOUSEOUT=\"this.style.backgroundColor=''; return true;\"");
}

Synes godt om

mclemens Nybegynder

19. marts 2006 - 20:06 #8

... det hjalp lidt :)

function showit() {
reptxt="<td class=\"si\" ONMOUSEOVER=\"this.style.backgroundColor='WHITESMOKE'; return true;\" ONMOUSEOUT=\"this.style.backgroundColor=''; return true;\"";

document.body.innerHTML=document.body.innerHTML.replace(/<td class="si"/gi, reptxt);

document.body.innerHTML=document.body.innerHTML.replace(/<td class=si/gi, reptxt);
}

Synes godt om

mclemens Nybegynder

19. marts 2006 - 20:26 #9

.. problemet var at IE definere class i document.body.innerHTML som class=si uanset hvad man gør i sin html bodyen mens FF definerer det til clas="si"

Synes godt om

roenving Novice

20. marts 2006 - 00:16 #10

Hrm, ville det ikke være meget bedre at tildele funktionerne i stedet for at manipulere innerHTML, so jo heller ikke er fremtidssikret, da det aldrig bør kunne virke i en xhtml-sammenhæng (men vist er implementeret i Gecko-maskinen (som bl.a. FireFox bruger !-)

<script type="text/javascript">
window.onload = function(){
var tds = document.getElementsByTagName("td");
for(i=0;tds.length>i;i++){
if(tds[i].className.match(/\bsi\b|\bsa\b/)){
tds[i].onmouseout = function(){this.style.backgroundColor = "";};
if(tds[i].className.match(/\bsi\b/))
tds[i].onmouseover = function(){this.style.backgroundColor = "whitesmoke";};
else
tds[i].onmouseover = function(){this.style.backgroundColor = "armygreen";};
}
}
}
</script>

-- hvor jeg så også viser muligheden for at have forskellige effekter aktiveret ved samme script (class="si" giver whitesmoke ved mouseover, class="sa" giver armygreen !-)

Synes godt om

mclemens Nybegynder

20. marts 2006 - 02:09 #11

roenving> Tak for dit input - ny i js ... fik bog(nærmere hæfte) i julegave ... js 1.5 fra IDG's forlag... lærer lidt nyt herinde dag for dag :)

ændrede lige baggrundsfarven på class sa... og kastede den ind i en test for syns skyld /der er ikke noget armygreen (gav fejl før - ellers skal der bruges #00ff00 eller rgb(0,255,0) værdier... )/

<html><head><script type="text/javascript">
window.onload = function(){
var tds = document.getElementsByTagName("td");
for(i=0;tds.length>i;i++){
if(tds[i].className.match(/\bsi\b|\bsa\b/)){
tds[i].onmouseout = function(){this.style.backgroundColor = "white";};
if(tds[i].className.match(/\bsi\b/))
tds[i].onmouseover = function(){this.style.backgroundColor = "whitesmoke";};
else tds[i].onmouseover = function(){this.style.backgroundColor = "green";};
}
}
}
</script></head>

<body>

<table><tr>
<td class="si">tekst</td>
<td class="sa">tekst</td>
<td>tekst</td>
</tr></table>
</body></html>

Synes godt om

mclemens Nybegynder

22. februar 2007 - 18:45 #12

Tak for point :o)

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 JavaScript kategorien

Titel	Indlæg	Oprettet	Seneste aktivitet
Returner ikke alt Af ingeman i JavaScript	13	26/06/202414:40	01/07/202417:00
Vis og skjul sektioner - virker kun på den første sektion Af nemlig i JavaScript	4	24/06/202422:50	26/06/202420:33
Hente og gemme Cookies like this. Af DanishBear i JavaScript	6	04/06/202416:23	05/06/202414:23
Ajax - indlæs webside og derefter hente data Af nemlig i JavaScript	4	21/05/202417:19	22/06/202422:07
Disable button efter 1. klik Af nemlig i JavaScript	2	05/05/202415:37	05/05/202416:25

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

26/07

Test: Endelig kan man få en soundbar der lyder godt - og som ikke behøver nogen klodset subwoofer

26/07

Analyse: ”Det største it-nedbrud i historien” viser hvor sårbare dine it-løsninger er - og det vil ske igen

26/07

Nørgaard: Jeg har jo sagt det gang på gang på gang! VMS er det bedste styresystem EVER! Men lytter folk?! Nej, nej og atter nej!

26/07

Kæmpeleverandør til Pentagon hacket: Interne undersøgelser lækket

26/07

Stor aftale gør Microsofts datacentre hurtigere - investerer i netværksudstyr

26/07

Nordjyske MapsPeople ruster op til opkøb af konkurrenter: "Vi vil vinde det her kapløb"

26/07

Mød den unge version af den mest elskede seriemorder nogensinde

26/07

AMD opdager cpu-fejl i 11. time: Storstilet lancering udskydes

26/07

Microsoft tager til genmæle: Vores licenspraksis skaber ikke unfair konkurrence

26/07

Med SearchGPT har verden fået en spritny søgemaskine: Kan den true Googles dominans?

26/07

Færre unge studerende på landets it-uddannelser: "Vi afviser dem der, hvor de har lyst til at læse"

Vis flere artikler

IT-JOB

MAN Energy Solutions

Skilled User Experience Designer (UI/UX)

Udviklings- og Forenklingsstyrelsen

Controller til økonomi og compliance

Udviklings- og Forenklingsstyrelsen

Udvikler til procesapplikationer

TV2

Configuration Specialist til programplanlægningssystemer i Content Ingest & Planning

Udviklings- og Forenklingsstyrelsen

Ny kollega til PMO med fokus på porteføljestyring og rapportering

Vis flere jobs

Seneste spørgsmål Seneste aktivitet

I dag 18:09	Kan ikke fildele fra PC til PC Af gertLundberg i LAN/WAN
I dag 17:33	Facebook kopier en tråd Af clausito i Sociale medier
I dag 09:49	Indtogs sejlads : OL i Paris : Hvornår kom Danmark ? Af Ikke-ekspert i Fri debat
I dag 03:28	Inkasso som privat? Af lekor adams i Fri debat
I går 23:51	Frossen cursor Af goglov i PC