Home/ Questions/Q 3348830
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-18T01:35:25+00:00

I have a simple html table which has several rows. the following is implemented

  • 0

I have a simple html table which has several rows. the following is implemented

1) I have given style for mouseover event of the row so that it will be highlighted once the mouse moves over it.

2)Each row has a checkbox as well. once this is selected, the row which the check box is in need to be shown in a different color as well.

The problem is that, once the row background changes after clicking the checkbox, the hover style applied to the onmoseover event of the row no longer applies.

Following is the code;

<html>
<head></head>

<style type="text/css">
  tr { background: blue; }
  tr:hover { background:green; }
</style>

<script type="text/javascript">

function Highlight(row)
{       
    if(document.getElementById('chk').checked)
    {
        document.getElementById(row).style.background='Red';
    }
    else
    {                   
        document.getElementById(row).onMouseOver = function() { this.className = 'hover'; }                 
    }       
}

</script>

<body>

<table>
<tr><th>Name</th> <th>Age</th></tr>

<tr id="row1" bgcolor="#FFFFFF" onMouseOver="className='hover';">
<td><input type="checkbox" id="chk" onclick="javascript:Highlight('row1');"</td>

<td>25</td></tr>
<tr id="row2"><td>aaaaaa</td><td>25</td></tr>
<tr id="row3"><td>aaaaaa</td><td>25</td></tr>

</table>

</body>

</html>

Appreciate if you could give me a solution.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    This is what you want,

    CSS – option I

     .yellow{ background:yellow; }

    Javascript – Option I

       function Highlight(row)
{       
    if(document.getElementById('chk').checked)
    {
        document.getElementById(row).className += " yellow"document.getElementById(row).style.background='Red';
    }
    else
    {    
        document.getElementById(row).className = document.getElementById(row).className.replace(/\byellow\b/,'')
    }

    document.getElementById(row).removeAttribute("style");
        document.getElementById(row).onMouseOver = function() { this.className += 'hover';                    

    hover'; }                 
    }       
}

    Javascript – Option II

     function Highlight(row)
{       
    if(document.getElementById('chk').checked)
    {
        document.getElementById(row).style.background='Red';
    }
    else
    {    
        document.getElementById(row).removeAttribute("style");
        document.getElementById(row).onMouseOver = function() { this.className = 'hover'; }                 
    }       
}

    HTML

    <tr id="row1">
    • 0