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.
The javascript will be a function in a link.
correction
make the following chages to mouseover and mouseout
$('td').removeClass('chang e_bg_white ').addClas s('change_ bg_black') ;
$('td').removeClass('chang e_bg_black ').addClas s('change_ bg_white') ;
make the following chages to mouseover and mouseout
$('td').removeClass('chang
$('td').removeClass('chang
***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>
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
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
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
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(fu nction() {
$(this).css("background-co lor", "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(func tion(event ) {
event.preventDefault();
$('td.some-class').each(fu nction() {
$(this).css("background-co lor", "blue");
});
});
});
Example
<td class="some-class"></td>
$(function() {
$('td.some-class').each(fu
$(this).css("background-co
});
});
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(func
event.preventDefault();
$('td.some-class').each(fu
$(this).css("background-co
});
});
});
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
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.
$(function() {
$('#element_to_mouse_over'
$('td').addClass('change_b
})
$('#element_to_mouse_over'
$('td').addClass('change_b
})
});