Question

I have a drop down in a td. There are 3 tr which I have set display:none in html. Based on drop down list selection I show one of these 3 table rows using JQuery.

It is working good but there is an issue. When I set tr display it do not take full length. If I remove display: none in html all tr take full lenght. Please guide me, here is my code:

function ddlChange() {        
    var index = $('select[id$=ddlSchoolFundingType]').get(0).selectedIndex;        
    if (index == 1) {            
        $('#ERIRow').css("display", "inline");
        $('#StudentRateRow').css("display", "None");
    }
    else if (index == 2) {

        $('#ERIRow').css("display", "none");
        $('#StudentRateRow').css("display", "inline");
    }
    else {        
        $('#ERIRow').css("display", "none");
        $('#StudentRateRow').css("display", "none");
    }
 }


<table class="SchoolFinances">
<tr>
    <td colspan="4">
        <asp:Label runat="server" ID="lblError" CssClass="ErrorLabel"></asp:Label>
    </td>
</tr>
<tr>
    <td colspan="4">
        <asp:Label CssClass="SFlbl1" Text="Please enter your school's SES score:" runat="server"
            ID="lblSESScore"></asp:Label>
    </td>
    <td colspan="3">
        <asp:TextBox CssClass="SFtxt1" runat="server" ID="txtSESScore"></asp:TextBox>
        <asp:RequiredFieldValidator runat="server" ID="rfvSESScore" Text="?" ControlToValidate="txtSESScore"
            Display="Dynamic" CssClass="ErrorLabel"></asp:RequiredFieldValidator>
    </td>
</tr>
<tr>
    <td colspan="4">
        <asp:Label CssClass="SFlbl1" runat="server" Text="In your school Funding Maintained or Funding Guaranteed?"
            ID="lblSchoolFundingType"></asp:Label>
    </td>
    <td colspan="3">
        <asp:DropDownList runat="server" ID="ddlSchoolFundingType" onChange="javascript:ddlChange()">
        </asp:DropDownList>
        <asp:RequiredFieldValidator runat="server" ID="RequiredFieldValidator1863" Text="?"
            ControlToValidate="ddlSchoolFundingType" CssClass="ErrorLabel" InitialValue=""></asp:RequiredFieldValidator>
    </td>
</tr>
<tr id="ERIRow" style="display: none; border:1px;">
    <td colspan="4">            
        <asp:Label CssClass="SFlbl1"  runat="server" Text="Please enter the ERI level" ID="lblERILevel"></asp:Label>
    </td>
    <td colspan="3">
        <asp:TextBox CssClass="SFtxt1" runat="server" ID="txtERILevel"></asp:TextBox>
        <asp:RequiredFieldValidator runat="server" ID="rfvERILevel" Text="?" ControlToValidate="txtERILevel"
            Display="Dynamic" CssClass="ErrorLabel"></asp:RequiredFieldValidator>
    </td>
</tr>
<tr id="StudentRateRow" style="display: none; border:1px;">
    <td colspan="4">
        <asp:Label CssClass="SFlbl1" runat="server" Text="Please enter the student funding rate"
            ID="lblStudentFundingRate"></asp:Label>
    </td>
    <td colspan="3">
        <asp:TextBox CssClass="SFtxt1" runat="server" ID="txtStudentFundingRate"></asp:TextBox>
        <asp:RequiredFieldValidator runat="server" ID="rfvStudentFundingRate" Text="?" Display="Dynamic"
            ControlToValidate="txtStudentFundingRate" CssClass="ErrorLabel"></asp:RequiredFieldValidator>
    </td>
</tr>

Answer 1

Try visibility: hidden instead display: none