html - Javascript code to get the background color is not working -
i trying design highlighting system used highlight rows in html table on mousehover code using given below, reason doesn't work, please help
<!-- row highlight javascript --> <script type="text/javascript"> window.onload=function() { var tfrow = document.getelementbyid('tfhover').rows.length; var tbrow=[]; var original; (var i=1;i<tfrow;i++) { tbrow[i]=document.getelementbyid('tfhover').rows[i]; tbrow[i].onmouseover = function() { original = tbrow[i].style.backgroundcolor; this.style.backgroundcolor = '#f3f8aa'; }; tbrow[i].onmouseout = function() { this.style.backgroundcolor = original; }; } }; </script>
however if change script
<script type="text/javascript"> window.onload=function() { var tfrow = document.getelementbyid('tfhover').rows.length; var tbrow=[]; (var i=1;i<tfrow;i++) { tbrow[i]=document.getelementbyid('tfhover').rows[i]; tbrow[i].onmouseover = function() { this.style.backgroundcolor = '#f3f8aa'; }; tbrow[i].onmouseout = function() { this.style.backgroundcolor = '#fff'; }; } }; </script>
then works fine trouble of rows of table has red background denote overdue of payment , such rows when mouse moved out background color of row changes white. need able revert background color of row original color when mouse if moved out.
this should work:
window.onload = function() { // cache dom queries var tfhover = document.getelementbyid('tfhover'); var tfrow = tfhover.rows.length; var tbrow = []; (var i=1; i<tfrow; i++) { // wrap logic in closure // otherwise original not think (function(index) { var original; tbrow[index] = tfhover.rows[index]; tbrow[index].onmouseover = function() { original = this.style.backgroundcolor; this.style.backgroundcolor = '#f3f8aa'; }; tbrow[index].onmouseout = function() { this.style.backgroundcolor = original; }; })(i); } };
Comments
Post a Comment