golles Posted February 24, 2009 Share Posted February 24, 2009 Guys, I found a script that does a crosshair hover on a table. (Online example) I was testing and noticed that does the crosshair hover on every table on the page. I would like to do the crsoohair hover on just one table with a class or id. the problem is that I don't know how to do this... <html> <head> <style type="text/css"> .hoverRow { background-color: #FFFF00; } .hoverColumn { background-color: #FFFF00; } .hoverCell { background-color: #FFFF00; } </style> <script type="text/javascript"> function hoverOver() { this.parentNode.className = "hoverRow"; var rowElements = this.parentNode.parentNode.childNodes; // Check in which column the this cell object is at the moment. var column = 0; var o = this; while (o = o.previousSibling) column++; for (var row = 0; row < rowElements.length; row++) { if (rowElements[row].nodeType != 1) continue; rowElements[row].childNodes[column].className = "hoverColumn"; } this.className = "hoverCell"; } function hoverOut() { this.parentNode.className = ""; var rowElements = this.parentNode.parentNode.childNodes; // Check in which column the this cell object is at the moment. var column = 0; var o = this; while (o = o.previousSibling) column++; for (var row = 0; row < rowElements.length; row++) { if (rowElements[row].nodeType != 1) continue; rowElements[row].childNodes[column].className = ""; } } function init() { var rowElements = document.getElementsByTagName("tr"); for (var row = 0; row < rowElements.length; row++) { columnElements = rowElements[row].childNodes; for (var column = 0; column < columnElements.length; column++) { columnElements[column].onmouseover = hoverOver; columnElements[column].onmouseout = hoverOut; } } } window.onload=init; </script> </head> <body> <table border="1" cellspacing="0"> <tr> <td>Some Table Data</td> <td>Some Table Data</td> <td>Some Table Data</td> <td>Some Table Data</td> <td>Some Table Data</td> <td>Some Table Data</td> <td>Some Table Data</td> </tr> <tr> <td>Some Table Data</td> <td>Some Table Data</td> <td>Some Table Data</td> <td>Some Table Data</td> <td>Some Table Data</td> <td>Some Table Data</td> <td>Some Table Data</td> </tr> <tr> <td>Some Table Data</td> <td>Some Table Data</td> <td>Some Table Data</td> <td>Some Table Data</td> <td>Some Table Data</td> <td>Some Table Data</td> <td>Some Table Data</td> </tr> <tr> <td>Some Table Data</td> <td>Some Table Data</td> <td>Some Table Data</td> <td>Some Table Data</td> <td>Some Table Data</td> <td>Some Table Data</td> <td>Some Table Data</td> </tr> <tr> <td>Some Table Data</td> <td>Some Table Data</td> <td>Some Table Data</td> <td>Some Table Data</td> <td>Some Table Data</td> <td>Some Table Data</td> <td>Some Table Data</td> </tr> </table> <br /><br /><br /><br /><br /><br /> <table border="1" cellspacing="0" class="onlythis" id="onlythis"> <tr> <td>Some Table Data</td> <td>Some Table Data</td> <td>Some Table Data</td> <td>Some Table Data</td> <td>Some Table Data</td> </tr> <tr> <td>Some Table Data</td> <td>Some Table Data</td> <td>Some Table Data</td> <td>Some Table Data</td> <td>Some Table Data</td> </tr> <tr> <td>Some Table Data</td> <td>Some Table Data</td> <td>Some Table Data</td> <td>Some Table Data</td> <td>Some Table Data</td> </tr> <tr> <td>Some Table Data</td> <td>Some Table Data</td> <td>Some Table Data</td> <td>Some Table Data</td> <td>Some Table Data</td> </tr> <tr> <td>Some Table Data</td> <td>Some Table Data</td> <td>Some Table Data</td> <td>Some Table Data</td> <td>Some Table Data</td> </tr> </table> </body> </html> note: this is just a temp test file! Quote Link to comment https://forums.phpfreaks.com/topic/146679-table-crosshair-hover/ Share on other sites More sharing options...
teknojunkey Posted February 24, 2009 Share Posted February 24, 2009 This should do it Css .tablestyle {cursor:crosshair;} html <table class="tablestyle"> ....etc ....etc </table> Quote Link to comment https://forums.phpfreaks.com/topic/146679-table-crosshair-hover/#findComment-770065 Share on other sites More sharing options...
golles Posted February 24, 2009 Author Share Posted February 24, 2009 I don't think you really read my post, I knew how to change the cursor... please look at the online example... Quote Link to comment https://forums.phpfreaks.com/topic/146679-table-crosshair-hover/#findComment-770066 Share on other sites More sharing options...
KevinM1 Posted February 24, 2009 Share Posted February 24, 2009 Guys, I found a script that does a crosshair hover on a table. (Online example) I was testing and noticed that does the crosshair hover on every table on the page. I would like to do the crsoohair hover on just one table with a class or id. the problem is that I don't know how to do this... <html> <head> <style type="text/css"> .hoverRow { background-color: #FFFF00; } .hoverColumn { background-color: #FFFF00; } .hoverCell { background-color: #FFFF00; } </style> <script type="text/javascript"> function hoverOver() { this.parentNode.className = "hoverRow"; var rowElements = this.parentNode.parentNode.childNodes; // Check in which column the this cell object is at the moment. var column = 0; var o = this; while (o = o.previousSibling) column++; for (var row = 0; row < rowElements.length; row++) { if (rowElements[row].nodeType != 1) continue; rowElements[row].childNodes[column].className = "hoverColumn"; } this.className = "hoverCell"; } function hoverOut() { this.parentNode.className = ""; var rowElements = this.parentNode.parentNode.childNodes; // Check in which column the this cell object is at the moment. var column = 0; var o = this; while (o = o.previousSibling) column++; for (var row = 0; row < rowElements.length; row++) { if (rowElements[row].nodeType != 1) continue; rowElements[row].childNodes[column].className = ""; } } function init() { var rowElements = document.getElementsByTagName("tr"); for (var row = 0; row < rowElements.length; row++) { columnElements = rowElements[row].childNodes; for (var column = 0; column < columnElements.length; column++) { columnElements[column].onmouseover = hoverOver; columnElements[column].onmouseout = hoverOut; } } } window.onload=init; </script> </head> <body> <table border="1" cellspacing="0"> <tr> <td>Some Table Data</td> <td>Some Table Data</td> <td>Some Table Data</td> <td>Some Table Data</td> <td>Some Table Data</td> <td>Some Table Data</td> <td>Some Table Data</td> </tr> <tr> <td>Some Table Data</td> <td>Some Table Data</td> <td>Some Table Data</td> <td>Some Table Data</td> <td>Some Table Data</td> <td>Some Table Data</td> <td>Some Table Data</td> </tr> <tr> <td>Some Table Data</td> <td>Some Table Data</td> <td>Some Table Data</td> <td>Some Table Data</td> <td>Some Table Data</td> <td>Some Table Data</td> <td>Some Table Data</td> </tr> <tr> <td>Some Table Data</td> <td>Some Table Data</td> <td>Some Table Data</td> <td>Some Table Data</td> <td>Some Table Data</td> <td>Some Table Data</td> <td>Some Table Data</td> </tr> <tr> <td>Some Table Data</td> <td>Some Table Data</td> <td>Some Table Data</td> <td>Some Table Data</td> <td>Some Table Data</td> <td>Some Table Data</td> <td>Some Table Data</td> </tr> </table> <br /><br /><br /><br /><br /><br /> <table border="1" cellspacing="0" class="onlythis" id="onlythis"> <tr> <td>Some Table Data</td> <td>Some Table Data</td> <td>Some Table Data</td> <td>Some Table Data</td> <td>Some Table Data</td> </tr> <tr> <td>Some Table Data</td> <td>Some Table Data</td> <td>Some Table Data</td> <td>Some Table Data</td> <td>Some Table Data</td> </tr> <tr> <td>Some Table Data</td> <td>Some Table Data</td> <td>Some Table Data</td> <td>Some Table Data</td> <td>Some Table Data</td> </tr> <tr> <td>Some Table Data</td> <td>Some Table Data</td> <td>Some Table Data</td> <td>Some Table Data</td> <td>Some Table Data</td> </tr> <tr> <td>Some Table Data</td> <td>Some Table Data</td> <td>Some Table Data</td> <td>Some Table Data</td> <td>Some Table Data</td> </tr> </table> </body> </html> note: this is just a temp test file! Give your table a unique id. Then, modify the init function to be: function init() { var myTable = document.getElementById('tableId'); //<-- use whatever id you want var rowElements = myTable.getElementsByTagName('tr'); //<-- retrieve just that table's rows /* use the rest of the function as-is */ } Quote Link to comment https://forums.phpfreaks.com/topic/146679-table-crosshair-hover/#findComment-770073 Share on other sites More sharing options...
golles Posted February 24, 2009 Author Share Posted February 24, 2009 thank you Nightslyr! Quote Link to comment https://forums.phpfreaks.com/topic/146679-table-crosshair-hover/#findComment-770077 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.