Link to home
Start Free TrialLog in
Avatar of tarrigo
tarrigo

asked on

javascript to change all td cell background color

I am curious if anyone knows of a way to change the td background color of all the td cells on a page with a mouseover. I just want them to all return back to white.

The javascript will be a function in a link.
Avatar of Julian Hansen
Julian Hansen
Flag of South Africa image

jquery is your friend

$(function() {
  $('#element_to_mouse_over').mouseover(function() {
      $('td').addClass('change_bg_black');
   })
  $('#element_to_mouse_over').mouseout(function() {
      $('td').addClass('change_bg_white');
   })
});
correction
make the following chages to mouseover and mouseout

$('td').removeClass('change_bg_white').addClass('change_bg_black');

$('td').removeClass('change_bg_black').addClass('change_bg_white');


***JS SMPLE***
function changeTDBackground()
{
	var tdList = document.getElementsByTagName('td');
	for(var i=0;i<tdList.length;i++)
	{
		tdList[i].style.backgroundColor = '#FFF';
	}
}

***HTML SAMPLE***
<a href="http://www.google.com" onmouseover="changeTDBackground(); return false;">Mouse Over Me...Cheese!</a>

<table><tr><td style="background-color:#000;">Bacon</td>
<td style="background-color:#000;">Bacon</td>
<td style="background-color:#000;">Bacon</td>
<td style="background-color:#000;">Bacon</td>
<td style="background-color:#000;">Bacon</td>
</tr></table>

Open in new window

ASKER CERTIFIED SOLUTION
Avatar of Member_2_4913559
Member_2_4913559
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
a) Because 14Kb in the scheme of the web today is nothing
b) The time saved using Jquery is more than worth it
c) In most cases you need to do more than change the background of cells in which case you reuse the library
d) You end up with cleaner looking code
f) No reason - if you like playing around with DOM in raw javascript and all the typing and debugging that goes with it - great - personally I have better things to do with my time - like meeting deadlines.

Just my thoughts though
Avatar of tarrigo
tarrigo

ASKER

I guess there is one problem and I was not clear about it. I need to control by which cells actually get changed back. Each one of the desired cells has a class name. Now I am trying to figure out a way to control or loop through the cells by td and class name, just just class name.

Again Jquery is your friend
Example
<td class="some-class"></td>

$(function() {
  $('td.some-class').each(function() {
      $(this).css("background-color", "blue");
  });
});

Will loop through all cells with class "some-class" and change their background to blue.

To combine with a mouse click

$(function() {
  $('#some-link').click(function(event) {
      event.preventDefault();
      $('td.some-class').each(function() {
          $(this).css("background-color", "blue");
      });
    });
});


SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of tarrigo

ASKER

I liked both of the possibilities presented. I was able to work through it using a variety of both solutions. I appreciate the help immensely.