[jQuery] Assigning an animation toggle to a checkbox to fade a table row in/out
I have created a table, at the end of each table row is a checkbox.
When the user selects the checkbox, that row will fade out to give the
illusion its now disabled. When the checkbox is unchecked I want the
row to fade back.
Can this be done? I have managed to do it rather crudely in the
following example:
Javascript...................................
<script>
$(document).ready(function(){
$(".deleteRow").click(function(){
$("tr").animate({
opacity: 0.2,
}, 1000 );
});
});
</script>
Html...................................
<table>
<tr>
<th>Heading</th>
<th>Second Heading</th>
<th>Third Heading</th>
</tr>
<tr>
<td>test row 1</td>
<td><input name="input1" type="text" /></td>
<td><select name="select1" ><option value ="first">first</option></
select></td>
<td class="right"><input id="go" name="deleteRow" type="checkbox"
class="deleteRow" value="deleteRow" /></td>
</tr>
</table>
Css...................................
<style type="text/css">
table{
width:500px;
border-collapse:collapse;
}
tr th{
font-weight:bold;
text-align:left;
}
tr td.right{
text-align:right;
}
tr{
border-bottom:1px solid #ccc;
}
</style>