Søg
Avatar billede xbobby Nybegynder
25. marts 2005 - 14:21 Der er 21 kommentarer og
2 løsninger

Baggrundsfarve på tabel på maouseover

Hej med jer

Jeg er på jagt efter noget javascript kode, som på en mouseover på en tabel viser en bestemt baggrundsfarve i tabellens område, og ved mouseout viser den igen en hvid baggrundsfarve for selve tabellen.

Hvad siger eksperterne?
Avatar billede barklund Nybegynder
25. marts 2005 - 14:23 #1
<tabel onmouseover="this.style.backgroundColor='#AAA';" onmouseout="this.style.backgroundColor='#FFF';>

Vel egentlig bare?

Eller måske via :hover på tabellen via et stylesheet.

--
Morten Barklund
Avatar billede xbobby Nybegynder
25. marts 2005 - 17:05 #2
Jeg prøvedet det, du snakkede om, men kan ikke få det til at fungerer - hvad gør jeg galt?

<html>
<head>
<title>Untitled Document</title>
</head>

<body>
<tabel width="100" border="1" onmouseover="this.style.backgroundColor='#AAA';" onmouseout="this.style.backgroundColor='#FFF'";>
  <tr>
    <td height="50">&nbsp;</td>
  </tr>
</table>
</body>
</html>
Avatar billede barklund Nybegynder
25. marts 2005 - 19:47 #3
Hm, en html tabel hedder jo <table> og ikke <tabel>, så det skal lige rettes :)
Avatar billede xbobby Nybegynder
25. marts 2005 - 20:26 #4
Pinligt at jeg ikke så det.

Kan man lave det sådan at de gælder for alle tabeller, eller skal man til at skrive den kode for hver tabel?
Avatar billede barklund Nybegynder
25. marts 2005 - 20:49 #5
Så er det bedre at bruge css:

<html>
<head>
<title>Untitled Document</title>
<style tpe="text/css">
table:hover {
  background-color: #AAA;
}
</style>
</head>

<body>
<table width="100" border="1">
  <tr>
    <td height="50">&nbsp;</td>
  </tr>
</table>
<table width="100" border="1">
  <tr>
    <td height="50">&nbsp;</td>
  </tr>
</table>
</body>
</html>
Avatar billede xbobby Nybegynder
25. marts 2005 - 21:52 #6
Det er rigtigt smart ud, men det virker ikke, hvad er det galt?
Avatar billede barklund Nybegynder
25. marts 2005 - 23:40 #7
Hm, næ, IE gider ikke laver hover på noget som helst - så må det blive java script:

<html>
<head>
<title>Untitled Document</title>
<script type="text/javascript">
window.onload = function() {
    var t = document.getElementsByTagName("table");
    for (var i = 0; i < t.length; i++) {
        t[i].onmouseover = function() { this.style.backgroundColor = '#AAA'; };
        t[i].onmouseout = function() { this.style.backgroundColor = '#FFF'; };
    }
}
</script>
</head>

<body>
<table width="100" border="1">
  <tr>
    <td height="50"><p>&nbsp;</p></td>
  </tr>
</table>
<table width="100" border="1">
  <tr>
    <td height="50">&nbsp;</td>
  </tr>
</table></div>
</body>
</html>

Virker både i IE og Firefox :)

--
Morten Barklund
Avatar billede xbobby Nybegynder
26. marts 2005 - 08:40 #8
Det fungerer perfekt - et sidste spørgsmål - kan man lave det sådan at man kan vælge hvilke tabeller hvor det skal ske og hvilke hvor det ikke må ske?
Avatar billede barklund Nybegynder
26. marts 2005 - 10:39 #9
Ja, men så er du jo ude i noget andet.

Så kan vi lave det med et custom navn til de tabeller, der har mouseover:

<html>
<head>
<title>Untitled Document</title>
<script type="text/javascript">
window.onload = function() {
    var t = document.getElementsByName("withover");
    for (var i = 0; i < t.length; i++) {
        t[i].onmouseover = function() { this.style.backgroundColor = '#AAA'; };
        t[i].onmouseout = function() { this.style.backgroundColor = '#FFF'; };
    }
}
</script>
</head>

<body>
<table width="100" border="1">
  <tr>
    <td height="50"><p>&nbsp;</p></td>
  </tr>
</table>
<table name="withover" width="100" border="1">
  <tr>
    <td height="50"><p>&nbsp;</p></td>
  </tr>
</table>
<table name="withover" width="100" border="1">
  <tr>
    <td height="50">&nbsp;</td>
  </tr>
</table>
</body>
</html>

Så burde det også kunne lade sig gøre :)

--
Morten Barklund
Avatar billede xbobby Nybegynder
26. marts 2005 - 10:56 #10
Det må helt klart være måden at gøre det på - men jeg kan ikke få det til at virke. (Jeg bruger IE)
Avatar billede roenving Novice
26. marts 2005 - 11:10 #11
Så f.eks.

<script type="text/javascript">
window.onload = function() {
  var t = document.getElementsByTagName("TABLE");
  for (var i = 0; i < t.length; i++)
    if(t[i].className == "withover"{
      t[i].onmouseover = function() { this.style.backgroundColor = '#AAA'; };
      t[i].onmouseout = function() { this.style.backgroundColor = '#FFF'; };
    }
}
</script>

<table class="withover" width="100" border="1">
Avatar billede barklund Nybegynder
26. marts 2005 - 11:10 #12
Måske den ikke kender getElementsByName - det burde den da...

Men så modificerer vi bare den anden:

window.onload = function() {
    var t = document.getElementsByTagName("table");
    for (var i = 0; i < t.length; i++) {
        if (t[i].name != "withover") continue;
        t[i].onmouseover = function() { this.style.backgroundColor = '#AAA'; };
        t[i].onmouseout = function() { this.style.backgroundColor = '#FFF'; };
    }
}
Avatar billede barklund Nybegynder
26. marts 2005 - 11:12 #13
Mjaa, det var jo noget af det samme, vi blev enige om :)
Avatar billede roenving Novice
26. marts 2005 - 11:19 #14
Alt andet lige vil jeg dog anbefale løsningen med class, da man faktisk også kan gøre sådan (og her er den lille irriterende fejl i if-linjen også rettet !-)

<script type="text/javascript">
window.onload = function() {
  var t = document.getElementsByTagName("TABLE");
  for (var i = 0; i < t.length; i++)
    if(t[i].className.indexOf("withover")>-1){
      t[i].onmouseover = function() { this.style.backgroundColor = '#aaa'; };
      t[i].onmouseout = function() { this.style.backgroundColor = ''; };
    }
}
</script>

-- og f.eks. i et stylesheet:
.withover{background-color:#fff;}
.backgreen{background-color:#afa;}

-- og så kan man f.eks. udnytte, at man må have flere classes på et tag:

<table class="withover backgreen" width="100" border="1">
Avatar billede xbobby Nybegynder
26. marts 2005 - 11:33 #15
Den sidste løsning styrer for vildt :-) og den den fungerer i begge browsere. Genialt med flere class i samme tag, det har jeg sgu aldrig set før og så krydset med et javascript - dyb respekt herfra :-)

Tusind tak for hjælpen - smid et svar.
Avatar billede roenving Novice
26. marts 2005 - 11:38 #16
Jo-jo, det vil jeg da gerne smide, men egentlig er det jo kun krøller på Mortens indsats, som jo startede i går, så det må vel være hans point hovedsageligt '-)
Avatar billede barklund Nybegynder
26. marts 2005 - 11:45 #17
Så lægger jeg da også et lille svar :)

Men ja, class løsningen er ikke dum :)
Avatar billede xbobby Nybegynder
26. marts 2005 - 11:46 #18
Ups der har jeg dummet mig - jeg havde slet ikke set at det var en ny der kom på banen, med den afsluttende løsning.

Vil det være en acceptabel løsning, at I deles om de 60 point?
Avatar billede barklund Nybegynder
26. marts 2005 - 11:50 #19
Hov, jeg lægger lige et rigtigt svar - og fordelingen er helt op til dig :)
Avatar billede xbobby Nybegynder
26. marts 2005 - 12:05 #20
Tak for en fyrstelig indsats begge to - godt gået :-)
Avatar billede roenving Novice
26. marts 2005 - 12:06 #21
Tak for point ;~}
Avatar billede barklund Nybegynder
26. marts 2005 - 12:07 #22
Så lidt - og tark for points :)
Avatar billede barklund Nybegynder
26. marts 2005 - 12:07 #23
Og sikke nogle fancy smileys du kan, roenving - der er jeg mere til klaaasikerne :D
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
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
problem med download i <a href=" " download> tag i JavaScript Af Peer i JavaScript 5 27/04/202620:09 03/05/202613:59
Validering af filnavn i formular Af Strawberry i JavaScript 8 14/04/202610:11 20/04/202611:14
Mangler et JavaScript til htm side med iframe i Joomla5 Af Peder Lund Nielsen i JavaScript 2 03/02/202614:19 04/04/202616:02
Åbne en PDF fil fra en mappe Af mbl i JavaScript 9 18/04/202516:52 22/04/202512:33
Spørgsmål til cookies Af Mads i JavaScript 2 14/02/202511:47 27/06/202514:34
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.

Opret Log ind

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten
Seneste spørgsmål Seneste aktivitet
I går 14:34 Hjælp til at kunne skanne negativer på Plustek 8300i SE Af Mariann i Foto & video
I går 13:58 Mapperne Dokumenter og Overførsler er forsvundet efter geninstallation af Win11 Af bragger i Windows
25/0713:55 Ukendt sender e-mails fra - og til min e-mail adresse Af mort1 i Andet sikkerhed
24/0711:08 Forskel mellem klokkeslet start aften slut næste morgen Af krasmussen i Excel
23/0715:10 WINDOWS KOMPABILITET Af snestrup2000 i Windows
White papers
Flere white papers »