2012-11-13 18 views
0

我在td中有一個下拉菜單。有3個我已經設置的tr顯示:無html。基於下拉列表選擇,我使用JQuery顯示了這3個表中的一行。tr顯示後不顯示全部長度:無

它運作良好,但有一個問題。當我設置tr顯示時,它不會全長。如果我刪除顯示:在HTML中沒有任何一個顯示全部長度。請指導我,這裏是我的代碼:

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> 

回答

2

嘗試visibility:hidden的,而不是顯示:無

3

我覺得你的問題是使用display: inline;。大多數情況下,內聯元素僅佔用足夠的寬度以適應其內容。

由於您使用的是jQuery,因此您可以嘗試分別使用jQuery#show()jQuery#hide()來顯示和隱藏元素,而不是手動設置display css屬性。

1

感謝每一位,我剛滿顯示錶行,而不是內聯或塊和它的工作。