Jump to content

Css Tr Row Highlight And Color Text To White


squaredvision
 Share

Recommended Posts

this is from a similar posting which uses javascript to highlight the rows<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>Untitled Document</title><style type="text/css">#MyTable {background-color:#FFFFFF;}</style><script type="text/javascript">function setattributes(){var x = document.getElementById("MyTable");var y = x.getElementsByTagName("tr");var trtotal = y.length;for(i=0;i<trtotal;i++) { if(window.addEventListener) { y.addEventListener('mouseover',trOver,false); y.addEventListener('mouseout',trOut,false); } else if(window.attachEvent) { y.attachEvent('onmouseover',trOver); y.attachEvent('onmouseout',trOut); } else { y.onmouseover = trOver; y.onmouseout = trOut; } }}function checktr(e){var targ;if (e.target) { targ=e.target; }else if (e.srcElement) { targ=e.srcElement; }if (targ.nodeType==3) // defeat Safari bug { targ = targ.parentNode; }return targ;}function trOver(e){var targ=checktr(e);targ.style.backgroundColor="#FF0000";targ.style.color="#ffffff";}function trOut(e){var targ=checktr(e)targ.style.backgroundColor="#ffffff";targ.style.color="#000000";}window.onload=setattributes;</script></head><body><table width="765" border="1" cellspacing="0" cellpadding="0" id="MyTable"> <tr> <td>111111111111111111111111111111111111</td> </tr> <tr> <td>222222222222222222222222222222222222</td> </tr> <tr> <td>333333333333333333333333333333333333</td> </tr> <tr> <td>444444444444444444444444444444444444</td> </tr> <tr> <td>555555555555555555555555555555555555</td> </tr> <tr> <td>666666666666666666666666666666666666</td> </tr> <tr> <td>777777777777777777777777777777777777</td> </tr></table></body></html>

Link to comment
Share on other sites

hmm, thanks for the tips. it doesn't work with colspan higher than 2, each td gets selected. is there anyway of doing this strictly all CSS? tablecloth is pretty neat but i have to download too files, i already have a few being loaded, i was wondering if i could just add on to my CSS instead of adding too more files.

Edited by squaredvision
Link to comment
Share on other sites

This uses css only, but won't work for IE6. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>Untitled Document</title><style type="text/css">table {border-collapse:collapse;}table tr {background-color:#00ff00; color:#000000;}/*table tr:hover {background-color: #FF9900; color:#FFFFFF; } highlights row*/table td:hover {background-color: #FF9900; color:#FFFFFF; } /* highlight cells */</style></head><body><table width="968" border="1" cellspacing="0" cellpadding="0"> <tr> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> </tr> <tr> <td colspan="4">Lorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit amet</td> </tr> <tr> <td>Lorem ipsum dolor sit amet</td> <td>Lorem ipsum dolor sit amet</td> <td> </td> <td>Lorem ipsum dolor sit amet</td> </tr> <tr> <td colspan="4">Lorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit amet</td> </tr></table></body></html>

Link to comment
Share on other sites

Awesome that is what I'm talking about.Is there a way to get it to work with this structure? http://www.squaredvision.com/test.htm.myaccountRow tr { color: red; background-color: white;}.myaccountRow tr:hover { background-color: black; cursor: pointer; color: yellow;}============<table border="0" cellpadding="0" cellspacing="0"><tr><td colspan="2" class="header2"><strong>Open Orders</strong></td></tr> <a href="#"><tr class="myaccountRow"> <td>122027</td> <td>2010 MERCEDES-BENZ GLK</td> <td>PHILADELPHIA, PA 19115</td> <td>MAPLE GROVE, MN 55311</td> <td>$868.00</td> <td>10/22/2009 1:16:59 PM</td> </tr></a></table>I dont want all the TR's to be affected just specific ones...Can I use the class and place it in the TR to affect what I want. How do I go about doing that?

Edited by squaredvision
Link to comment
Share on other sites

depends if specific affected tr is going to be a constant? not changing all the time.just assign class to tr<tr class="highlightthis">then target that specific classtable tr.highlightthis:hover{yaddah,yaddah}ortable tr.highlightthis td:hover{yaddah,yaddah}one small point using <a href="#"><tr... is not valid and should not be outside of td tag, and is not required for hover effect anyway.if you required to list further details for example create a link in first cell <td><a href="thispage">link</a></td>to this page

Edited by dsonesuk
Link to comment
Share on other sites

hmm, i think im one step closer to figuring this out...This is what I have now: http://www.squaredvision.com/test.htmBut only the td is being selected not the whole TR. how do I get the TR(the whole row to select)?table tr.myaccountRow td:hover { background-color: #E0E0E0; cursor: pointer; color: red;}table tr.myaccountRow { color: black; background-color: #F8F8F8;}

Link to comment
Share on other sites

well it would wont it, move the hover section below normaltable tr.myaccountRow ,table tr.myaccountRow:link, table tr.myaccountRow:visited{color: black;background-color: #F8F8F8;} table tr.myaccountRow:hover {background-color: #E0E0E0;cursor: pointer;color: red;}edit also try above

Edited by dsonesuk
Link to comment
Share on other sites

OK FORGET THAT!change to table tr.myaccountRow:hover tdedit: the reason the text is not changing is because of.myaccountGrid td{ color: #000; padding: 3px; font-size: 11px; font-family: Tahoma, Geneva, sans-serif;}and class="myaccountRow myaccountGrid"my original code targeted the row only, whereas 'myaccountGrid td' targeted all the cells, and because it is listed last it took precedence over my settings.

Edited by dsonesuk
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...