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>