javascript - Forkort javascript kode? - Udvikleren.dk - Programmering, webdesign og grafik

Tags: javascript

<< < 1 2 > >>

Bruger #16320 @ 17.05.11 23:25

Hey udviklere.

Jeg har denne javascript kode:

<tr id="7" onClick="musklik(this.id);" onMouseOver="musind(this.id);" onMouseOut="musud(this.id);">

Som jeg bruger til mine tabeller for at lyse baggrunden op når man holder musen over. Men findes der ikke en mere simpel metode at gøre dette på?

Lige nu ser det nemlig meget rodet ud:

PHP kode

 echo '<tr id="1" onClick="musklik(this.id);" onMouseOver="musind(this.id);" onMouseOut="musud(this.id);"><td>Sidens titel:</td><td><input type="text" name="title" value="' . $indstill[title] . '" class="text"></td></tr>';
 echo '<tr id="2" onClick="musklik(this.id);" onMouseOver="musind(this.id);" onMouseOut="musud(this.id);"><td>Meta beskrivelse:</td><td style="width: 80%;"><textarea name="kommentar" style="width:450px; height: 80px; border: 0px; background-color: ' . $color . '; border: 1px solid ' . $color . '">' . $indstill[kommentar] . '</textarea></td><td><a onClick="alert(\'Beskrivelse af din hjemmeside som vises på søgemaskiner, som bla. google, yahoo m.m.\');" href="#"><IMG border="0" style="cursor:help;" src="images/icons/information.png"></a></td></tr>';
 echo '<tr id="3" onClick="musklik(this.id);" onMouseOver="musind(this.id);" onMouseOut="musud(this.id);"><td>Meta keywords:</td><td><input type="text" name="keyword" value="' . $indstill[keyword] . '" class="text"></td><td><a onClick="alert(\'De ord man søger på ved en søgemaskine for at finde din side\');" href="#"><IMG border="0" style="cursor:help;" src="images/icons/information.png"></a></td></tr>';

(bare et udkast fra min kode)

Og selve javascript koden ser således ud:

JScript kode

 <script type="text/javascript">
     function musind(x){
         document.getElementById(x).style.backgroundColor="#F0F0F0";
     }
     
     function musud(x) {
         document.getElementById(x).style.backgroundColor="#FFFFFF";
     }
     
     function musklik(x) {
         document.getElementById(x).style.backgroundColor="yellow";
     }
 </script>

11 svar postet i denne tråd vises herunder
4 indlæg har modtaget i alt 19 karma

Sorter efter stemmer Sorter efter dato

Bruger #13559 @ 18.05.11 00:58

198

Du kan ændre din javascriptkode til

JScript kode

 <script>
     window.onload = function () {
         var antal_tr = 7;
         var change_bg = function (color) {
             return function (e) { this.style.backgroundColor = color; };
         }
 
         for (var i = 1; i <= antal_tr; i++) {
             var elem = document.getElementById(i);
             if (elem) {
                 elem.onclick = change_bg("yellow");
                 elem.onmouseover = change_bg("#f0f0f0");
                 elem.onmouseout = change_bg("#ffffff");
             }
         }
     };
 </script>

Så slipper du helt for at have javascript i din htmlkode

<tr id="7"> .... </tr>

Bruger #69 @ 18.05.11 08:38

188

Hej Matjøvas

Du kan faktisk også helt undgå javascript til den effekt ved at lave det med CSS (og det bruger også færre kodelinier). Du kan bruge tr:hover selectoren, selvom du nok bør sætte en class på dine tr's:

CSS kode

 tr:hover {
   background-color: #f0f0f0;
 }
 
 /* Eller hvis du sætter en klasse på dine tr */
 tr.klasse-navn:hover {
   background-color: #f0f0f0;
 }

Det er altså noget kortere end med javascript :-)

Bruger #1 @ 18.05.11 09:56

1.204

Matjøvas, Phillip har faktisk allerede vist dig hvordan du kan gøre det med en klasse. Hvis den er på din tabel i stedet, ser det blot således ud:

CSS kode

 table.overviewTable tr:hover {
    background-color: #f0f0f0;
 }

Mvh.

Kasper (TSW)

TSW WebCoder | TSW SiteSync | FashionArena.net | SuperBazar | Jeans Udsalg

Bruger #1 @ 18.05.11 10:51

1.204

En ren JavaScript løsning er selvfølgelig fin nok hvis man ikke bruger nogen JS frameworks. Personligt bruger jeg altid jQuery og derfor ville jeg gøre noget ala det her:

JScript kode

 <script type="text/javascript">
 $(function()
 {
     $("table.overviewTable tr").bind("mouseover", function()
     {
         $(this).css("background-color", "#F0F0F0");
     }).bind("mouseout", function()
     {
         $(this).css("background-color", "#fff");
     }).bind("click", function()
     {
         $(this).css("background-color", "yellow");
     });
 });
 </script>

Mvh.

Kasper (TSW)

TSW WebCoder | TSW SiteSync | FashionArena.net | SuperBazar | Jeans Udsalg

Indlæg senest redigeret d. 18.05.2011 10:53 af Bruger #1

Bruger #16320 @ 18.05.11 09:54

Begge svar ser meget fyldestgørende ud.

Phillip:

Smart metode med CSS, dog er det ikke alle tabeller jeg vil have hover på. De tabeller som jeg gerne vil have åbner jeg således:
<table class="overviewTable">
Kan man evt. definere, hvis tabellens klasse hedder "overviewtable", så skal der komme hover på trs?

AH:
Smart - men samme spørgsmål som overstående. Og en anden ting.
I stedet for at definere antal tr's kan det så ikke laves på en anden måde? Fordi jeg tit har mange rows, hvor jeg har et ubestemt antal <tr>'s.

Bruger #5620 @ 18.05.11 10:14

1.500

Hvis du bruger CSS teknikken skal du huske at sætte en doctype. Ellers går IE i quirkmode, testede det med IE8,og der virker hover ikke på andet end a tags.

Med doctype, du kan sikkert sætte andre typer. Jeg tog denne fra udvikleren.

Kode

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
  <style>
table.d tr:hover{
  background-color:red;
}
  </style>
</head>
<body>
  <table class="d">
    <tr><td>Test</td></tr>
  </table>
</body>
</html>

Uden doctype

Kode

<html>
<head>
  <style>
table.d tr:hover{
  background-color:red;
}
  </style>
</head>
<body>
  <table class="d">
    <tr><td>Test</td></tr>
  </table>
</body>
</html>

Bruger #16320 @ 18.05.11 10:29

O.K. Jens - det kan jeg se. I det jeg bruger doctype opstår der andre problemer i back-end designet, så jeg må holde mig til Javascript.

Afventer forsat javascript løsningen.

Gode og konstruktive svar p.t. ellers.