Can someone assist me in incorporating the Bind and Unbind functions? I have a table with multiple rows, each containing radio buttons. Currently, when I hover over a row it changes to light blue. However, once I select a radio button, I can no longer hover over the other rows. How can I fix this issue?
<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>