Yes, fading table rows can be done, and you've almost got it. Right
now your javascript will fade out all table rows in the document when
any check box is clicked.
$("tr").animate({
opacity: 0.2,
}, 1000 );
So you need to change $("tr").animate(...) to something like $
(this).parent("tr").animate(...);
$(this).parent("tr") will target only the single row that contains the
clicked check box, which is what you want.
On Feb 11, 9:22 am, quirksmode <[EMAIL PROTECTED]> wrote:
> 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>
