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.
tarrigoAsked:
Who is Participating?
 
ddayx10Commented:
Why use 14kb of JQuery to do a job that .000001kb of regular js will solve? That's all I'm sayin!
Don't mind me, I'm just being rotten :)
0
 
Julian HansenCommented:
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');
   })
});
0
 
Julian HansenCommented:
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');
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
ddayx10Commented:


***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

0
 
Julian HansenCommented:
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
0
 
tarrigoAuthor Commented:
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.

0
 
Julian HansenCommented:
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");
      });
    });
});


0
 
Julian HansenCommented:
Actually - in your case you don't need the each function - the following will also work

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

Will apply the change to all td elements of class "some-class"
0
 
tarrigoAuthor Commented:
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.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.