Hi, this works in my browser:
<html>
<script type="text/javascript" src="jquery.js"></script>
<script>
$(document).ready(function(){
$('.deleteRow').click(function() {
if($(this).attr("checked")) {
id=this.id;
splitid=id.split('|');
trid=splitid[1];
$("tr#"+trid).animate({
opacity: 0.2,
}, 500 );
} else {
$("tr").animate({
opacity: 1,
}, 500 );
}
});
});
</script>
Html...................................
<table>
<tr>
<th>Heading</th>
<th>Second Heading</th>
<th>Third Heading</th>
</tr>
<tr id="1">
<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|1" name="deleteRow" type="checkbox"
class="deleteRow" value="deleteRow" /></td>
</tr>
<tr id="2">
<td>test row 2</td>
<td><input name="input2" type="text" /></td>
<td><select name="select2" ><option value ="first">first</option></
select></td>
<td class="right"><input id="go|2" name="deleteRow" type="checkbox"
class="deleteRow" value="deleteRow" /></td>
</tr>
<tr id="3">
<td>test row 3</td>
<td><input name="input3" type="text" /></td>
<td><select name="select3" ><option value ="first">first</option></
select></td>
<td class="right"><input id="go|3" 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>
</html>
Since you'r going to have more than one deleterow checkrow, you cannot
give it the same id for every checkbox. So give them a dynamic id,
with a separator fi: 'go|1'
Give the tablerow also a dynamic id, it must be the same number as
appears in your checkbox id.
Then in the script, get the id from the checkbox, split it, take the
number and use it as id for the tablerow to animate.
I hope this might help...
Polskaya
