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
Sæt vindue størrelse Af poulmadsen i JavaScript	1	08/10/202417:18	13/10/202412:33
Opgavestyring Af ingeman i JavaScript	1	15/09/202416:06	15/09/202420:40
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

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

15:59

Test af Apple Watch Series 10: Apples jubilæums-model er blevet lidt af en mester af det hele

15:25

Google Clouds netop fratrådte topchef har fundet sit nye job: Bliver en af de mest magtfulde personer hos ServiceNow

15:01

Nu går OpenAI efter struben på Google: ChatGPT fungerer nu også som en AI-søgemaskine

14:30

Nørgaard: Agenterne kommer, og jeg er klar: Måske bliver min gamle drøm snart virkelighed

01/11

Staten vil selv udvikle kæmpe it-system til 650 millioner kroner: Nu tvinges regeringen til at lægge vigtige dokumenter frem

01/11

Det går fantastisk på det danske Dynamics-marked: NNIT-selskabet Scales kan vælge og vrage mellem opgaver

01/11

Linus Torvalds giver russiske Linux-udviklere sparket: Vil ikke have noget med dem at gøre

01/11

Skelsættende GDPR-sag ændrer definitionen af 'følsomme oplysninger'

01/11

Google indlemmer sin AI Gemini i Google Maps, Google Earth og Waze: Det kommer det til at betyde

01/11

Microsoft: Tvungen skift til Windows 11 kan udskydes med et år, hvis du betaler os 200 kroner

01/11

Sådan blev Margrethe Vestager ’Silicon Valleys største fjende’

Vis flere artikler

IT-JOB

Semler Gruppen

Change Manager til Semler Gruppen

Danmarks Lærerforening

Erfaren forandringsleder til digital transformation hos Danmarks Lærerforening

Danske Commodities A/S

Senior Software Developer & Tech Lead

KMD A/S

Lead BI Developer

Hemmersbach Denmark ApS

IT Fieldservice Tekniker

Vis flere jobs

Seneste spørgsmål Seneste aktivitet

I dag 06:10	Excel åbner fil i kæmpe format Af Aske i Excel
I går 22:00	Datafordeler Af Lsk i PHP
I går 12:37	Summere beløb pr. dato Af TTA i Excel
31/1022:44	Tilslutte chassic fans Af viking69 i PC
31/1020:28	LED lysstofrør Af ErikHg i Fri debat