change background color

[robert_gsfame]

I have scrollbar to show all records that i retrieved from database...i wish to have <td> background color change to #CCCCCC once being click and let say i have 5 records, then if second record is being clicked then the background turn into #CCCCCC and when another record is being clicked assume third record then i want to have the third record background turn into #CCCCCC while the other turn into #FFFFFF

 

i have this for my html, $id--> is the dynamic record, $total--> mysql_num_rows($query)

<td id=$id onclick=changecolor('$id','$total')>

 

then i have this function

function changecolor(x,y){

document.getElementById(x).style.backgroundColor="#CCCCCC";

for(i=0;i<y+1;i++){

if(i!==x){

document.getElementById(i).style.backgroundColor="#FFFFFF";}

}

}

 

Result: when i click on the record, it turn into #CCCCCC but when i click on the other record i still find the first record i choose before still with #CCCCCC background color not #FFFFFF

 

thx in advance

 

 

[seventheyejosh]

You can do it pretty easily with jquery

 

<table id="myTable">
    <tr>
        <td>
            Test
        </td>
    </tr>
    <tr>
        <td>
            Test 2
        </td>
    </tr>
</table>

<script type="text/javascript" src="/path/to/jquery.js"></script>

<script type="text/javascript">

    $(document).ready(function(){
    
        $("#myTable td").each(function(){
        
            $(this).click(function(){
            
                changeColor(this);
            
            });
        
        });
    
    });

function changeColor(which){

    $("#myTable td").each(function(){
    
        $(this).css("background-color","ffffff");
    
    })
    
    $(which).css("background-color","cccccc");

}// end function


</script>

[robert_gsfame]

how bout js as i am not to familiar with jquery

[seventheyejosh]

I'd definitely check it out. For now I can explain my code, but I don't have the time to create a pure javascript version. Although, for that matter, jquery is pure javascript.

 

<table id="myTable"> // this is a sample table. it has tds
    <tr>
        <td>
            Test
        </td>
    </tr>
    <tr>
        <td>
            Test 2
        </td>
    </tr>
</table>

<script type="text/javascript" src="/path/to/jquery.js"></script> // a link to jquery, gotten from jquery.com

<script type="text/javascript">

    $(document).ready(function(){   // when the page is done loading...
   
        $("#myTable td").each(function(){    // get every td inside of our table, where the table's id = myTable, and run a function on them
       
            $(this).click(function(){     // this = a td in our table. so we are saying, when this particular td is clicked...
           
                changeColor(this);       // run a function called changeColor, and pass the object representation of the current td in our loop
           
            });
       
        });
   
    });

function changeColor(which){    // our function decleration

    $("#myTable td").each(function(){   // get every td inside of our table, where the table's id = myTable, and run a function on them
   
        $(this).css("background-color","ffffff"); // make the current td's background white. as this is a loop, as before ( each() ) it will make all the td's white
   
    })
   
    $(which).css("background-color","cccccc"); // now that the table has been 'reset' to white, make the td that was clicked have a background color of #cccccc

}// end function


</script>

[Ken2k7]

It seems pretty intensive to include jQuery for something so simple. I don't encourage using jQuery for anything other than effects like fading, sliding, etc.

 

As for the function, I'm not sure what you're going for. Can I see the HTML that goes with this? Here's revision, but I'm unsure if it works.

function changecolor(x,y){
     for(i=0;i<y+1;i++){
          document.getElementById(i).style.backgroundColor="#FFFFFF";}
     }
     document.getElementById(x).style.backgroundColor="#CCCCCC";
}

[seventheyejosh]

I firstly, agree that jQuery isn't a must. It is definitely good to learn how pure Javascript works. That being said, minified jquery is an extremely small file (20ish kb), and the benefits are massive. Not only does it provide a quick consistent interface, it is cross-browser compatible. So no checking against msie, no errors because he didn't close his onclick calls, or give them a terminator... Secondly giving your td's id's of a single int value is terrible practice. It gives no meaning to what they are.

 

I learned javascript. It is cool (read: I freaking love it!). I now work at a company employing a centralized framework and will never, ever go back. We have jquery on every page just so it is ready. Would you really rather type out document.getElementById('someId').innerHTML=''; or just $("#someId").html(''); ? And don't get me started on ajax...

 

Now that I've derailed, my point is, learn Javascript, then learn a Framework (read: jQuery ), then be amazed at simple elegant code.

 

Back to OP...

[robert_gsfame]

$query=mysql_query("SELECT * FROM table1 WHERE username='username'");

$total=mysql_num_rows($query);

if(!empty($rows)){

while($array=mysql_fetch_array($query)){

$id=$array['id'];

echo "<td id=$id onclick=changecolor('$id','$total');>";}}

 

function changecolor(x,y){

document.getElementById(x).style.backgroundColor="#CCCCCC";

for(i=0;i<y+1;i++){

if(i!==x){

document.getElementById(i).style.backgroundColor="#FFFFFF";}

}

}

 

So i wish to have td background change into #CCCCCC once click and have the other td background with #FFFFFF

 

 

 

[Ken2k7]

I firstly, agree that jQuery isn't a must. It is definitely good to learn how pure Javascript works. That being said, minified jquery is an extremely small file (20ish kb), and the benefits are massive. Not only does it provide a quick consistent interface, it is cross-browser compatible. So no checking against msie, no errors because he didn't close his onclick calls, or give them a terminator... Secondly giving your td's id's of a single int value is terrible practice. It gives no meaning to what they are.

 

I learned javascript. It is cool (read: I freaking love it!). I now work at a company employing a centralized framework and will never, ever go back. We have jquery on every page just so it is ready. Would you really rather type out document.getElementById('someId').innerHTML=''; or just $("#someId").html(''); ? And don't get me started on ajax...

 

Now that I've derailed, my point is, learn Javascript, then learn a Framework (read: jQuery ), then be amazed at simple elegant code.

 

Back to OP...

If you need a few selectors, write your own function or something that masks document.getElementById("id"). Something like:

function getID (id) {
     return document.getElementById(id);
}

 

That, as far as I know, is already cross-browser compatible. There are very little things that aren't and they are mostly under the category of effects.

 

@robert_gsfame, did you try my modified code?

[robert_gsfame]

yes but not working..i think there's something wrong with the style.background

How does the loop not working, even if i try to put the alert before the document.getElementById() inside the looping, but it stops after executing once (0)

 

Really confused :'( :'(

[seventheyejosh]

Do you have any javascript errors? Or a url where we can see the issue?

[Ken2k7]

Can you please post the relevant HTML? Not PHP code. I don't care about that.

[robert_gsfame]

no error.. they just won't work

i cut the function into this

 

function bgcol(){

for(i=0;i<5;i++){

document.getElementById(i).style.backgroundColor="#CCCCCC";}

}

 

and i use (i) as <td id> but no effect appear

[robert_gsfame]

this is weird...when i keep on modifying the code

 

for (var x = 1; x <= 6; x++)

  {

document.getElementById(x).style.backgroundColor="#CCCCCC"

    }

 

and it works! what is the different between this and what i've posted before????????gossh can anyone explain this to me

 

is the 0 cause everything??

 

[Ken2k7]

Probably if $id is never 0. This is probably better:

function changecolor(x,y){
     for(i=0;i<y+1;i++){
          if (document.getElementById(i)) document.getElementById(i).style.backgroundColor="#FFFFFF";}
     }
     document.getElementById(x).style.backgroundColor="#CCCCCC";
}