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

Popular posts from this blog

c# - How Configure Devart dotConnect for SQLite Code First? -

c++ - Clear the memory after returning a vector in a function -

erlang - Saving a digraph to mnesia is hindered because of its side-effects -