0

tdにドロップダウンがあります。htmlにdisplay：noneを設定したtrが3つあります。ドロップダウンリストの選択に基づいて、JQueryを使用してこれら3つのテーブル行の1つを表示します。

正常に動作していますが、問題があります。tr表示を設定すると、完全な長さにはなりません。表示を削除した場合：htmlには何もありません。すべてのtrが完全な長さになります。私を導いてください、ここに私のコードがあります：

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>

4

3 に答える 3

3

あなたの問題はを使用していると思いますdisplay: inline;。ほとんどの場合、インライン要素はそのコンテンツに合わせて十分な幅しか占有しません。

jQuery を使用しているので、display css 属性を手動で設定するのではなく、それぞれjQuery#show()とjQuery#hide()を使用して要素を表示および非表示にしてみてください。

于 2012-11-13T22:08:48.630 に答える
2

可視性を試してください: 代わりに非表示にします 表示: なし

于 2012-11-13T22:05:16.843 に答える
1

インラインまたはブロックの代わりにテーブル行を表示するだけで、うまくいきました。

于 2012-11-13T22:10:49.690 に答える