Thread: JavaScript: Change row color of table

Tags:

19.04.2008 23:22 Uhr

herbx

Status: offline

hello everybody.

Can sb please make a js function for me that changes the backgroundcolor of the tablerow on mouse over and the function that opens a new link in the window.

For example:

PHP:

<tr style="cursor: pointer;" 
onclick="switchColor('#EE0000'); accessLink('example/fun.html','_self'); onmouseover="switchColor('#DDDDDD','tablebutton1')" 
onmouseout="switchColor('#FFFFFF', 'tablebutton1')" 
id="tablebutton1">

I don't know any JS so I cant do it...Would be great if sb of you can do it...
so thats what i need i guess:

switchColor (color,rowID)
accessLink (url,target)

i guess you can see what i am trying to do. I want to make a froum that has all stuff in a row, and the user can click on the row to enter the topic ...

Thank you in advance.

1 mal bearbeitet

___________________________
Warum denn so ernst??? Zaubern wir ein lächeln auf dieses Gesicht!

20.04.2008 00:31 Uhr

dragonl

Status: offline

Hi there,

i'll test it with FF2, O9, NS9, IE7 und IE6(MultipleIEs) on WinXpSp2.

html:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <title>RowHighlight</title>
    <style type="text/css">
      <!--
        table { border:1px solid #0f0f0f; background-color:#f0f0f0; }
        tr    { cursor:pointer; }
      -->
    </style>
    <script type="text/javascript">
      <!--
        function switchColor(COLOR,TARGET_ID){
                 document.getElementById(TARGET_ID).style.backgroundColor = COLOR;
                 }
        function accessLink(URL,TARGET){
                 window.open(URL,TARGET);
                 }
      -->
    </script>
  </head>
  <body>
  
    <table>
      <tr id="row1" onmouseover="switchColor('#dddddd',this.id);"
                    onmouseout ="switchColor('#f0f0f0',this.id);"
                    onclick    ="switchColor('#ffffff',this.id);
                                 accessLink('./docRowOne.html','_self');">
        <td>row 1 - cell 1</td>
        <td>row 1 - cell 2</td>
        <td>row 1 - cell 3</td>
      </tr>
      <tr id="row2" onmouseover="switchColor('#dddddd',this.id);"
                    onmouseout ="switchColor('#f0f0f0',this.id);"
                    onclick    ="switchColor('#ffffff',this.id);
                                 accessLink('./docRowTwo.html','_self');">
        <td>row 2 - cell 1</td>
        <td>row 2 - cell 2</td>
        <td>row 2 - cell 3</td>
      </tr>
      <tr id="row3" onmouseover="switchColor('#dddddd',this.id);"
                    onmouseout ="switchColor('#f0f0f0',this.id);"
                    onclick    ="switchColor('#ffffff',this.id);
                                 accessLink('./docRowThree.html','_self');">
        <td>row 3 - cell 1</td>
        <td>row 3 - cell 2</td>
        <td>row 3 - cell 3</td>
      </tr>
    </table>
  
  </body>
</html>

I think the JS is self explained, have a nice day :lol:

~Dragonl

___________________________
Gemeinde Jugend Vertretung Bremen
"Ich will das Rad kein zweites mal erfinden,
ich will nur verstehen wie es funktioniert !"