robert_gsfame Posted April 20, 2010 Share Posted April 20, 2010 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 Link to comment https://forums.phpfreaks.com/topic/199139-change-background-color/ Share on other sites More sharing options...
seventheyejosh Posted April 20, 2010 Share Posted April 20, 2010 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> Link to comment https://forums.phpfreaks.com/topic/199139-change-background-color/#findComment-1045175 Share on other sites More sharing options...
robert_gsfame Posted April 20, 2010 Author Share Posted April 20, 2010 how bout js as i am not to familiar with jquery Link to comment https://forums.phpfreaks.com/topic/199139-change-background-color/#findComment-1045185 Share on other sites More sharing options...
seventheyejosh Posted April 20, 2010 Share Posted April 20, 2010 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> Link to comment https://forums.phpfreaks.com/topic/199139-change-background-color/#findComment-1045196 Share on other sites More sharing options...
Ken2k7 Posted April 20, 2010 Share Posted April 20, 2010 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"; } Link to comment https://forums.phpfreaks.com/topic/199139-change-background-color/#findComment-1045228 Share on other sites More sharing options...
seventheyejosh Posted April 20, 2010 Share Posted April 20, 2010 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... Link to comment https://forums.phpfreaks.com/topic/199139-change-background-color/#findComment-1045237 Share on other sites More sharing options...
robert_gsfame Posted April 20, 2010 Author Share Posted April 20, 2010 $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 Link to comment https://forums.phpfreaks.com/topic/199139-change-background-color/#findComment-1045243 Share on other sites More sharing options...
Ken2k7 Posted April 20, 2010 Share Posted April 20, 2010 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? Link to comment https://forums.phpfreaks.com/topic/199139-change-background-color/#findComment-1045249 Share on other sites More sharing options...
robert_gsfame Posted April 20, 2010 Author Share Posted April 20, 2010 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 :'( :'( Link to comment https://forums.phpfreaks.com/topic/199139-change-background-color/#findComment-1045252 Share on other sites More sharing options...
seventheyejosh Posted April 20, 2010 Share Posted April 20, 2010 Do you have any javascript errors? Or a url where we can see the issue? Link to comment https://forums.phpfreaks.com/topic/199139-change-background-color/#findComment-1045253 Share on other sites More sharing options...
Ken2k7 Posted April 20, 2010 Share Posted April 20, 2010 Can you please post the relevant HTML? Not PHP code. I don't care about that. Link to comment https://forums.phpfreaks.com/topic/199139-change-background-color/#findComment-1045254 Share on other sites More sharing options...
robert_gsfame Posted April 20, 2010 Author Share Posted April 20, 2010 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 Link to comment https://forums.phpfreaks.com/topic/199139-change-background-color/#findComment-1045259 Share on other sites More sharing options...
robert_gsfame Posted April 20, 2010 Author Share Posted April 20, 2010 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?? Link to comment https://forums.phpfreaks.com/topic/199139-change-background-color/#findComment-1045272 Share on other sites More sharing options...
Ken2k7 Posted April 20, 2010 Share Posted April 20, 2010 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"; } Link to comment https://forums.phpfreaks.com/topic/199139-change-background-color/#findComment-1045299 Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.