Question

I would like to use Bind and Unbind Please. I have a table with multiple rows. I have radio buttons for each row. When I execute the html, I am able to hover over each row and each row will change to light blue. If I select a radio button, I can no longer hover over the other rows I didn’t select. please help me out

    <table id ="myTable">
 <tr>
<th>Selected</th>
<th>First Name</th>
<th>Middle Name</th>
<th style="width: 10%;">Last Name</th>
<th>Active Email</th>

       <tr>
    <td><input class ="rad" type="radio" name="developerRadio" value="Value 1" /></td>
    <td>Hello</td>
    <td>everyone</td>
    <td>good</td>
    <td>email</td>
    <td>hello</td>

 </tr>
           <tr>
    <td><input class ="rad" type="radio" name="developerRadio" value="Value 1" /></td>
    <td>Hello</td>
    <td>everyone</td>
    <td>good</td>
    <td>email</td>
    <td>hello</td>

 </tr>
        <tr>
    <td><input class ="rad" type="radio" name="developerRadio" value="Value 1" /></td>
    <td>Hello</td>
    <td>everyone</td>
    <td>good</td>
    <td>email</td>
    <td>hello</td>

 </tr>




<script>
$(document).ready(function () {
    $("tr").mouseover(function () {
        $(this).css("background-color", "#0066FF");
    });
    $("tr").mouseout(function () {
        $(this).css("background-color", "");
    });

    $('input:radio').click(function () {
        $("tr").unbind("mouseover mouseout");
        $(this)
            .closest('tr')
                .siblings()
                .css('background-color', 'white')
                .end()
            .css('background-color', 'darkblue');
        $("input:radio")
            .unbind("click")
            .click(function () {
                $('tr').bind("mouseover");
                $(this).closest('tr').css('background-color', "#0066FF");
        });
    });
});
</script>

Answer 1

How about ye olde css?

tr {background: transparent;}
tr:hover {background: #0066FF;}
tr.active {background: lightgoldenrod;}
tr.active:hover {background: yellow;}

and bind an active class to the radio button’s tr e.g:

$("input[type='radio']").click(function(
    $(this).parentsUntil("tr").parent().addClass("active")
    $(this).parentsUntil("tr").parent().siblings().removeClass("active");
));