jefe42 Posted May 24, 2007 Share Posted May 24, 2007 Hi: I know how to highlight a row (tr) using CSS on hover, but how would I also highlight the whole column (td) at the intersection on hover. Please see the attached image. Thanks in Advance! Jeff Quote Link to comment https://forums.phpfreaks.com/topic/52754-trtd-intersection-highlight/ Share on other sites More sharing options...
ToonMariner Posted May 24, 2007 Share Posted May 24, 2007 hmmm intersting never had to tackle this one... have a look at styling colgroups (don't know if that will work) otherwise you'll have to give each cell a class of col1, col2 etc. and use some js like so <table border="1"> <tr> <td class="col1" onmouseover="highlight(this);" onmouseout"defaultbg(this);">1</td> <td class="col2" onmouseover="highlight(this);" onmouseout"defaultbg(this);">2</td> <td class="co3" onmouseover="highlight(this);" onmouseout"defaultbg(this);">3</td> <td class="col4" onmouseover="highlight(this);" onmouseout"defaultbg(this);">4</td> </tr> <tr> <td class="col1" onmouseover="highlight(this);" onmouseout"defaultbg(this);">1</td> <td class="col2" onmouseover="highlight(this);" onmouseout"defaultbg(this);">2</td> <td class="co3" onmouseover="highlight(this);" onmouseout"defaultbg(this);">3</td> <td class="col4" onmouseover="highlight(this);" onmouseout"defaultbg(this);">4</td> </tr> </table> and this js function highlight(el) { var tds = document.getElementsByTagName('td'); for(var i=0;i<tds.length;i++) { if (tds[i].className == el.classname) { tds[i].style.background = '#666'; } } return; } function defaultbg(el) { var tds = document.getElementsByTagName('td'); for(var i=0;i<tds.length;i++) { if (tds[i].className == el.classname) { tds[i].style.background = '#fff'; } } return; } try that modify it so that you background colors are correct - you will need to add another if statment to dectect if the row is even or odd and apply the correct bg to that... Quote Link to comment https://forums.phpfreaks.com/topic/52754-trtd-intersection-highlight/#findComment-260586 Share on other sites More sharing options...
jefe42 Posted May 24, 2007 Author Share Posted May 24, 2007 hmmm intersting never had to tackle this one... have a look at styling colgroups (don't know if that will work) otherwise you'll have to give each cell a class of col1, col2 etc. and use some js like so <table border="1"> <tr> <td class="col1" onmouseover="highlight(this);" onmouseout"defaultbg(this);">1</td> <td class="col2" onmouseover="highlight(this);" onmouseout"defaultbg(this);">2</td> <td class="co3" onmouseover="highlight(this);" onmouseout"defaultbg(this);">3</td> <td class="col4" onmouseover="highlight(this);" onmouseout"defaultbg(this);">4</td> </tr> <tr> <td class="col1" onmouseover="highlight(this);" onmouseout"defaultbg(this);">1</td> <td class="col2" onmouseover="highlight(this);" onmouseout"defaultbg(this);">2</td> <td class="co3" onmouseover="highlight(this);" onmouseout"defaultbg(this);">3</td> <td class="col4" onmouseover="highlight(this);" onmouseout"defaultbg(this);">4</td> </tr> </table> and this js function highlight(el) { var tds = document.getElementsByTagName('td'); for(var i=0;i<tds.length;i++) { if (tds[i].className == el.classname) { tds[i].style.background = '#666'; } } return; } function defaultbg(el) { var tds = document.getElementsByTagName('td'); for(var i=0;i<tds.length;i++) { if (tds[i].className == el.classname) { tds[i].style.background = '#fff'; } } return; } try that modify it so that you background colors are correct - you will need to add another if statment to dectect if the row is even or odd and apply the correct bg to that... Thanks for the response! I'll play with this code today and see what I can't come up with. I'm with you though, I've never seen this one done (except in the screenshot I took). Quote Link to comment https://forums.phpfreaks.com/topic/52754-trtd-intersection-highlight/#findComment-260918 Share on other sites More sharing options...
jefe42 Posted May 24, 2007 Author Share Posted May 24, 2007 You suggestion colgroups (Which I had never heard of) led me to more google searches. I thus found the following solution <!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=utf-8" /> <title>Untitled Document</title> <style type="text/css"> .cur_row { color: #000; background: #FFE3B3; } .cur_col { color: #000; background: #FFF9B5; } .cur_cell { color: #000; background: #FDC743; } </style> <script type="application/javascript"> window.onload=function() { init(); } function init() { var table=document.getElementById('highlight'); function highlight(row, col, state) { for(var i=0; i<table.rows.length; i++) { if(state=='off') { for(var j=0; j<table.rows[i].cells.length; j++) { table.rows[i].cells[j].className=''; } } if(state=='on') { table.rows[i].cells[col].className='cur_col'; } } for(var i=0; i<table.rows[row].cells.length; i++) { if(state=='on') { table.rows[row].cells[i].className='cur_row'; table.rows[row].cells[col].className='cur_cell'; } } } // end function highlight // detect cursor position for(var i=0; i<table.rows.length; i++) { table.rows[i].row_index=i; for(var j=0; j<table.rows[i].cells.length; j++) { table.rows[i].cells[j].column_index=j; table.rows[i].cells[j].onmouseover=function() { highlight(this.parentNode.row_index, this.column_index, 'on'); } table.rows[i].cells[j].onmouseout=function() { highlight(this.parentNode.row_index, this.column_index, 'off'); } } } } </script> </head> <body> <table border="1" cellspacing="0" cellpadding="4" id="highlight"> <tr> <td>Row 1, Column 1</td> <td>Row 1, Column 2</td> <td>Row 1, Column 3</td> </tr> <tr> <td>Row 2, Column 1</td> <td>Row 2, Column 2</td> <td>Row 2, Column 3</td> </tr> <tr> <td>Row 3, Column 1</td> <td>Row 3, Column 2</td> <td>Row 3, Column 3</td> </tr> </table> </body> </html> Taken from http://forums.htmlhelp.com/lofiversion/index.php/t2055.html (just dropped into a nice document so people could copy/paste) Quote Link to comment https://forums.phpfreaks.com/topic/52754-trtd-intersection-highlight/#findComment-260954 Share on other sites More sharing options...
jefe42 Posted May 24, 2007 Author Share Posted May 24, 2007 However, does anyone know why it does not work properly in IE? Quote Link to comment https://forums.phpfreaks.com/topic/52754-trtd-intersection-highlight/#findComment-260969 Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.