Question

我想根据下拉选项隐藏和显示列。我为每个<td>提供了具体的ID。基于选择更改列隐藏但列的数量正在变化。请找到下面给出的截图。

java脚本

  function producttype_selection_change() {
        try {
            var type = cmbProdectType.GetText();
            if (type == "--Select--") {
                document.getElementById("<%=td_seal_lbl.ClientID %>").style.display = "none";
                document.getElementById("<%=td_seal_cmb.ClientID %>").style.display = "none";
                document.getElementById("<%=td_system_lbl.ClientID %>").style.display = "none";
                document.getElementById("<%=td_system_cmb.ClientID %>").style.display = "none";
                document.getElementById("<%=td_coupling_lbl.ClientID %>").style.display = "none";
                document.getElementById("<%=td_coupling_cmb.ClientID %>").style.display = "none";
                document.getElementById("<%=td_bearings_lbl.ClientID %>").style.display = "none";
                document.getElementById("<%=td_bearings_cmb.ClientID %>").style.display = "none";
            }
            if (type == "Seals") {
                document.getElementById("<%=td_seal_lbl.ClientID %>").style.display = "block";
                document.getElementById("<%=td_seal_cmb.ClientID %>").style.display = "block";
                document.getElementById("<%=td_system_lbl.ClientID %>").style.display = "none";
                document.getElementById("<%=td_system_cmb.ClientID %>").style.display = "none";
                document.getElementById("<%=td_coupling_lbl.ClientID %>").style.display = "none";
                document.getElementById("<%=td_coupling_cmb.ClientID %>").style.display = "none";
                document.getElementById("<%=td_bearings_lbl.ClientID %>").style.display = "none";
                document.getElementById("<%=td_bearings_cmb.ClientID %>").style.display = "none";
            }
            if (type == "Seals ,Systems & Couplings") {
                document.getElementById("<%=td_seal_lbl.ClientID %>").style.display = "block";
                document.getElementById("<%=td_seal_cmb.ClientID %>").style.display = "block";
                document.getElementById("<%=td_system_lbl.ClientID %>").style.display = "block";
                document.getElementById("<%=td_system_cmb.ClientID %>").style.display = "block";
                document.getElementById("<%=td_coupling_lbl.ClientID %>").style.display = "block";
                document.getElementById("<%=td_coupling_cmb.ClientID %>").style.display = "block";
                document.getElementById("<%=td_bearings_lbl.ClientID %>").style.display = "none";
                document.getElementById("<%=td_bearings_cmb.ClientID %>").style.display = "none";
            }
        }
        catch (e) {
            alert(e);
        }
    }

设计代码

    <tr>
    <td align="right">
        <asp:Label ID="lblProductType" runat="server" Text="*Product Type :" ForeColor="Black"
            Width="90px"></asp:Label>
    </td>
    <td align="left" colspan="7">
        <dx:ASPxComboBox ID="cmbProdectType" runat="server" ClientInstanceName="cmbProdectType"
            Width="180px" IncrementalFilteringMode="Contains">
            <Items>
                <dx:ListEditItem Text="--Select--" Value="0" Selected="true" />
                <dx:ListEditItem Text="Seals" Value="1" />
                <dx:ListEditItem Text="Systems" Value="2" />
                <dx:ListEditItem Text="Couplings" Value="3" />
                <dx:ListEditItem Text="Bearings" Value="4" />
                <dx:ListEditItem Text="Seals & System" Value="5" />
                <dx:ListEditItem Text="Seals ,Systems & Couplings" Value="6" />
            </Items>
            <ClientSideEvents SelectedIndexChanged="function(s,e){producttype_selection_change();}" />
        </dx:ASPxComboBox>
    </td>
</tr>
<tr>
    <td align="right" id="td_seal_lbl" runat="server" style="white-space:nowrap;">
        <asp:Label ID="lblseals" runat="server" Text="Seals :" ForeColor="Black" Width="40px"></asp:Label>
    </td>
    <td align="left" id="td_seal_cmb" runat="server" style="white-space:nowrap;">
        <dx:ASPxComboBox ID="cmbSeals" runat="server" ClientInstanceName="cmbSeals" Width="80px"
            IncrementalFilteringMode="Contains">
        </dx:ASPxComboBox>
    </td>
    <td align="right" id="td_system_lbl" runat="server">
        <asp:Label ID="lblsystem" runat="server" Text="Systems :" ForeColor="Black" Width="60px"></asp:Label>
    </td>
    <td align="left" id="td_system_cmb" runat="server">
        <dx:ASPxComboBox ID="cmbSystems" runat="server" ClientInstanceName="cmbSystems" Width="80px"
            IncrementalFilteringMode="Contains">
        </dx:ASPxComboBox>
    </td>
    <td align="right" id="td_coupling_lbl" runat="server">
        <asp:Label ID="lblcoupling" runat="server" Text="Couplings :" ForeColor="Black" Width="65px"></asp:Label>
    </td>
    <td align="left" id="td_coupling_cmb" runat="server">
        <dx:ASPxComboBox ID="cmbCouplings" runat="server" ClientInstanceName="cmbCouplings"
            Width="80px" IncrementalFilteringMode="Contains">
        </dx:ASPxComboBox>
    </td>
    <td align="right" id="td_bearings_lbl" runat="server">
        <asp:Label ID="lblbearings" runat="server" Text="Bearings :" ForeColor="Black" Width="60px"></asp:Label>
    </td>
    <td align="left" id="td_bearings_cmb" runat="server">
        <dx:ASPxComboBox ID="cmbBearings" runat="server" ClientInstanceName="cmbBearings"
            Width="80px" IncrementalFilteringMode="Contains">
        </dx:ASPxComboBox>
    </td>
</tr>

当前输出

期待输出

Answer 1

在新表中定义第二行tr。这样，根据不同的条件删除其单元格不会改变您的布局

隐藏列时asp.net td列对齐更改

1 个答案: