background color problems together with onclick.. (i almost have it)

**markg85** · Sep 30, 2006, 14:10

Hey,

i`ve made a little script that allows you to hover over a table and the background color will change.. than when you move out it will change back to default.. that`s all fine.. the clicking part is the part that gives me the most pain.. at this moment you can click on it and the background color gets orange (like i want it) but now the problem is that i want 2 other things in it and i can`t get them working :S

you see a checkbox on the left.. i want to make it so that when the checkbox is checked the entire row gets orange.. when the chechbox is unchecked the entire row must be default again.. but i`m not getting that working.. also the checkbox must turn on/off when you click anywhere in that row.. not just on the checkbox itself.. any help would be verry nice

here is the script:

PHP Code:


<html>

<head>

<script type="text/javascript">

  function set_color(theRow, action, default_color, hover_color, click_color)

  {

    //document.write("jhjhgjhgj");

    theCells = theRow.getElementsByTagName('td');

    if (action == 'over')

    {

        newColor = hover_color;

    }

    if (action == 'out')

    {

        newColor = default_color;

    }

    if (action == 'click')

    {

        newColor = click_color;

    }

    

    var rowCellsCnt  = theCells.length;

    var c = null;

    for (c = 0; c < rowCellsCnt; c++)

    {

        theCells[c].setAttribute('bgcolor', newColor);

    }

    



  }



</script>



</head>

<body>

<table>

  <tr class="normal" onmouseover="set_color(this, 'over', '#FFFFFF', '#FF0000', '#FFCC99');" onclick="this.onmouseout = function() {set_color(this, 'click', '#FFFFFF', '#FF0000', '#FFCC99');};" onmouseout="set_color(this, 'out', '#FFFFFF', '#FF0000', '#FFCC99');" onmousedown="set_color(this, 'click', '#FFFFFF', '#FF0000', '#FFCC99');">

    <td><input type="checkbox"></td>

    <td>abcdef</td>

    <td>fedcba</td>

  </tr>

  <tr class="normal" onmouseover="set_color(this, 'over', '#FFFFFF', '#FF0000', '#FFCC99');" onclick="this.onmouseout = function() {set_color(this, 'click', '#FFFFFF', '#FF0000', '#FFCC99');};" onmouseout="set_color(this, 'out', '#FFFFFF', '#FF0000', '#FFCC99');" onmousedown="set_color(this, 'click', '#FFFFFF', '#FF0000', '#FFCC99');">

    <td><input type="checkbox"></td>

    <td>abcdef</td>

    <td>fedcba</td>

  </tr>

</table>

</body>

</html>

BTW.. this is my first javascript coding ever

you can really get far with the javascript development information on mozilla

and to give another example how i want it.. i want it to behaive EXACTLY the same like phpmyadmin does when you want to select multiple columns.

Thanx alot.

**php_daemon** · Sep 30, 2006, 14:39

Here you go:

HTML Code:

<html>
<head>
<script type="text/javascript">
  function set_color(theRow, action, default_color, hover_color, click_color)
  {
    var chk=document.getElementsByName('chk');
    if (action == 'over')
    {
        newColor = hover_color;
    }
    if (action == 'out')
    {
        if(!chk[theRow.rowIndex].checked)newColor = default_color;
        else newColor = click_color;
    }
    if (action == 'click')
    {
        if(chk[theRow.rowIndex].checked){
		  chk[theRow.rowIndex].checked=false;
		  newColor = default_color;
		}else{
		  chk[theRow.rowIndex].checked=true;
		  newColor = click_color;
		}
        
    }
    
    theRow.style.background=newColor;
    

  }

</script>

</head>
<body>
<table>
  <tr class="normal" onmouseover="set_color(this, 'over', '#FFFFFF', '#FF0000', '#FFCC99');" onclick="set_color(this, 'click', '#FFFFFF', '#FF0000', '#FFCC99');" onmouseout="set_color(this, 'out', '#FFFFFF', '#FF0000', '#FFCC99');" >
    <td><input name="chk" type="checkbox"></td>
    <td>abcdef</td>
    <td>fedcba</td>
  </tr>
  <tr class="normal" onmouseover="set_color(this, 'over', '#FFFFFF', '#FF0000', '#FFCC99');" onclick="set_color(this, 'click', '#FFFFFF', '#FF0000', '#FFCC99');" onmouseout="set_color(this, 'out', '#FFFFFF', '#FF0000', '#FFCC99');" >
    <td><input name="chk" type="checkbox"></td>
    <td>abcdef</td>
    <td>fedcba</td>
  </tr>
</table>
</body>
</html>

I've simplified it a bit also.

Also I'd suggest to remove the colors from function parameters and rather define the colors in css or js. That would save you from redundant code.

**markg85** · Sep 30, 2006, 14:46

thanx alot for the fast reply

for the colors.. this was all just for testing purpose.. the end result will be done with styles

and i request.. i see you gave some names to the checkboxes.. i wonder if it`s possible to do it without names or id`s.. because i want to loop those rows in php and i`m not sure if javascript is gonna take that..

edit:://
tested it in the loop and that really screws it up :P could be because of the php code ofcause :P

here is that code:
and i`m just testing it.. the code will get cleaner and better in time!!

PHP Code:


            foreach ($test as $value1 => $value2)

            {

                echo "<tr onmouseover=\"set_color(this, 'over', '#FFFFFF', '#FF0000', '#FFCC99');\" onclick=\"set_color(this, 'click', '#FFFFFF', '#FF0000', '#FFCC99');\" onmouseout=\"set_color(this, 'out', '#FFFFFF', '#FF0000', '#FFCC99');\">";

                //echo "<tr class=\"list_normal\">";

                

                

                //echo "<td><input type=\"checkbox\" class=\"chk\" name=\"chkbox1\" value=\"1\" onclick=\"selectRow(this);\" /></td>";

                echo "<td><input type=\"checkbox\" name=\"chk\" value=\"1\"></td>";

                foreach ($value2 as $key0 => $key1)

                {

                    echo "<td>" . str_end($key1, 80) . "</td>";

                }

                

                echo "</tr>";

            }

            echo "</table>";

**php_daemon** · Sep 30, 2006, 14:55

Perhaps you could, but why? You'll still need to name them in order to pass to php script.

**markg85** · Sep 30, 2006, 14:56

Originally Posted by php_daemon

Perhaps you could, but why? You'll still need to name them in order to pass to php script.

read my edit please :P

again edited..
question for you

i`m currently making a phpmyadmin alternative.. i have all the php knowledge to make it but not all the javascript knowledge.. and you seem to know alot about it.. would you like to join me in making that script? it`s called LightAdmin but the name can still be changed.. for now it`s just all kinds of test things put together..

could you let me know if you want to join? or want to hear all the idea`s i have with the script..??

**php_daemon** · Sep 30, 2006, 15:00

What's going wrong?

Edit:

I doubt I can join you, but I sure can listen to your ideas.

**markg85** · Sep 30, 2006, 15:06

well.. when i`m checking the first row the second gets the check and the first row gets the color :P strange huh.. but it could be a error in the php coding!! i didn`t really checked it yet..

and for your edit.. how do you do that?? :S
and can you add me to msn? my msn is markg852 at hotmail dot com and i`m online now.

Edit:

those [ e d i t ] tags are new for me... are those things modded in here or in vbulletin by default? since there is no indication of it in the advanced reply window....

The SitePoint Forums have moved.

User Tag List

Thread: background color problems together with onclick.. (i almost have it)

Thread Tools

Display

background color problems together with onclick.. (i almost have it)

Bookmarks

Bookmarks

Posting Permissions