I am currently working on developing a highlighting feature for an HTML table that will dynamically change the row colors on mouseover. Below is the code snippet I have been using, but it seems to be experiencing some issues. Any assistance would be greatly appreciated.
<!-- Row Highlight Javascript -->
<script type="text/javascript">
window.onload=function()
{
var tfrow = document.getElementById('tfhover').rows.length;
var tbRow=[];
var original;
for (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, when I modify the script as follows:
<script type="text/javascript">
window.onload=function()
{
var tfrow = document.getElementById('tfhover').rows.length;
var tbRow=[];
for (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>
The modified version works well, however, I encounter an issue with rows that are highlighted in red indicating overdue payments. When the mouse moves out of these rows, the background color reverts to white. It is crucial for me to retain the initial background color of each row after the mouse hover effect ends.