Hi guys,

I have a html table having class name "visiblerow" and "hiddenrow" in hidden row i am using display:none style sheet and for visible row display:block style sheet. Now when i am trying to applied alternate color by using these code then its not working.I have observed that due to using asp:panel its creating the problem to evaluate the even and odd row. Since asp:panel is visible true and false at server side and i have to do this functionality at client side.

Please advise how to resolve this problem.

In my page I have lots of radio but and on click of radio button the hidden row is visible and display, so on when radio button is clicked then row color should be changed from top of the page.

I mean that the visible and hidden row color should be alternate automatically when radio button clicked.

I am using this jquery and this is my html page.

jquery:

<script src="http://code.jquery.com/jquery-latest.js"></script>

<script>

$(document).ready(function() 
{
if($('#gts').not('HiddenRow')) 
{ 
$("#gts").filter(function() { return this.parentNode.nodeName !== "td" })
.children('tbody').children('tr:not(HiddenRow):visible').addClass('VisibleRow');

}

var $tr = $('#gts tr'); 

 for (var i = 0, l = $tr.length; i < l; i += 2) 

 $($tr[i]).css("background-color","rgb(243,243,255)");

$('input[type=radio]').live('change', function() 
{

$(this).tr.css("background-color","");
$(this).tr.css("background-color","rgb(243,243,255)");

}

</script>

<table cellSpacing="1" cellPadding="1" width="100%" align="center" border="0" id= "gts">
<tr>
<td class="table_header" vAlign="top" colSpan="3">&nbsp;<asp:label id="lblCharterPartyTitle" runat="server"></asp:label></td>
</tr>
<asp:panel id="pnlOwnerEntity" Visible="false" Runat="server">
<TR>
<TD class="alter1" width="30%">&nbsp;
<asp:label id="lblOwnerEntity" runat="server"></asp:label></TD>
<TD class="mandatory" width="1%">*</TD>
<TD class="alter1" width="69%">
<uc1:uclAjaxComboDataGrid id="uclAjaxComboDataGrid3" runat="server"></uc1:uclAjaxComboDataGrid>
<asp:regularexpressionvalidator id="rexOwnerEntity" runat="server" Enabled="False" Display="None" ControlToValidate="uclAjaxComboDataGrid3:txtComboText"
ValidationExpression="[A-Za-z0-9\/\s&amp;-]*"></asp:regularexpressionvalidator></TD>
</TR>
</asp:panel><asp:panel id="pnlDepartment" Visible="false" Runat="server">
<TR>
<TD class="alter2" width="30%">&nbsp;
<asp:label id="lblDepartment" runat="server"></asp:label></TD>
<TD class="mandatory" width="1%">*</TD>
<TD class="alter2" width="69%">
<uc1:uclAjaxComboDataGrid id="UclDepartment" runat="server"></uc1:uclAjaxComboDataGrid>
<asp:regularexpressionvalidator id="Regularexpressionvalidator1" runat="server" Enabled="False" Display="None" ControlToValidate="UclDepartment:txtComboText"
ValidationExpression="[A-Za-z0-9\/\s&amp;-]*"></asp:regularexpressionvalidator></TD>
</TR>
</asp:panel>
<tr>
<td class="alter1" width="30%">&nbsp;
<div style="width:185px;float:left">&nbsp;&nbsp;<asp:label id="lblCPName" runat="server" CssClass="Field_Labels"></asp:label><uc1:uclhelp id="uclHelp_CPName" runat="server"></uc1:uclhelp></div><div class="information" style="width:180px;float:left;padding-top:4px">(eg: Fixture Number - 3059)</div><asp:label id="lblCPNameInfo" runat="server" CssClass="information" Visible=False Width="152px"></asp:label></td>
<td class="mandatory" width="1%">
<div align="center">*</div>
</td>
<td class="alter1"><div style="width:165px;float:left"><asp:textbox id="txtCPName" runat="server" CssClass="txtbox" Width="155px" MaxLength="50"></asp:textbox></div><div class="information" style="width:200px;float:left;padding-top:4px">Max Length: 50 Chars</div>
<asp:label id="lblCPNameValueInfo" runat="server" CssClass="information" Visible=False ></asp:label>
<asp:label id="lblCloneDetails" CssClass="MandatoryBlue" Runat="server" ></asp:label>
<asp:regularexpressionvalidator id="rexCPName" runat="server" ValidationExpression="[A-Za-z0-9»\-\\\\ \. \&amp;]*"
ControlToValidate="txtCPName" Display="None" Enabled="True"></asp:regularexpressionvalidator><asp:requiredfieldvalidator id="vldCPName" runat="server" ControlToValidate="txtCPName" Display="None"></asp:requiredfieldvalidator></td>
</tr>
<asp:panel id="CPCreatedOn" Visible="false" Runat="server">
<TR>
<TD class="alter2" width="30%">&nbsp;
<asp:label id="lblCPCreatedDateTime" runat="server" CssClass="Field_Labels"></asp:label></TD>
<TD width="1%"></TD>
<TD class="alter2" width="69%">
<asp:label id="lblCPCreatedDateTimeValue" runat="server" CssClass="Field_Labels"></asp:label></TD>
</TR>
</asp:panel>
<tr>
<td class="alter2" width="30%">&nbsp;
<asp:label id="lblVoyageCPType" runat="server" CssClass="Field_Labels"></asp:label><uc1:uclhelp id="UclVoyageCPType" runat="server"></uc1:uclhelp></td>
<td width="1%">
<div align="center"></div>
</td>
<td class="alter2" width="69%"><asp:radiobuttonlist CssClass="trheight1" id="rdoVoyageCPType" runat="server" RepeatDirection="Horizontal"></asp:radiobuttonlist></td>
</tr>
<tr>
<td class="alter1" width="30%">&nbsp;
<asp:label id="lblCPType" runat="server" CssClass="Field_Labels"></asp:label><uc1:uclhelp id="uclCPType" runat="server"></uc1:uclhelp></td>
<td width="1%">
<div align="center"></div>
</td>
<td class="alter1" width="69%"><asp:radiobuttonlist CssClass="trheight1" id="rdoCPType" runat="server" RepeatDirection="Horizontal"></asp:radiobuttonlist></td>
</tr>
<asp:panel id="pnlProductCost" Visible="true" Runat="server">
<TR id="CPEnterCost" class="VisibleRow">
<TD class="alter2" width="30%">&nbsp;
<asp:label id="lblCostType" runat="server" CssClass="Field_Labels">Product Cost?</asp:label>
<uc1:uclhelp id="UclProduct_Help" runat="server"></uc1:uclhelp></TD>
<TD class="mandatory" width="1%">*</TD>
<TD class="alter2" width="69%">
<asp:radiobuttonlist CssClass="trheight1" id="rdoCostType" runat="server" RepeatDirection="Horizontal"></asp:radiobuttonlist>
<asp:requiredfieldvalidator id="rfvCostEntered" runat="server" Display="None" ControlToValidate="rdoCostType"></asp:requiredfieldvalidator></TD>
</TR>

</table>