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?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

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
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
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

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

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
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
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Web Components

From novice to tech pro — start learning today.