0

我在 td 中有一个下拉列表。我在 html 中设置了 3 个 tr 显示：无。基于下拉列表选择，我使用 JQuery 显示这 3 个表行之一。

它工作得很好，但有一个问题。当我设置 tr 显示时，它不需要全长。如果我删除 display: none in html all 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，您可以尝试使用jQuery#show()和jQuery#hide()分别显示和隐藏您的元素，而不是手动设置 display css 属性。

于 2012-11-13T22:08:48.630 回答
2

尝试可见性：隐藏而不是显示：无

于 2012-11-13T22:05:16.843 回答
1

谢谢大家，我只是打开了显示表行而不是内联或块，它起作用了。

于 2012-11-13T22:10:49.690 回答