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

我希望根据下拉选择隐藏和显示列。我为每个

指定了特定的id。基于选择更改列隐藏，但列的内容正在更改。请查看下面给出的屏幕截图

java脚本

功能产品类型\选择\更改（）{
试一试{
var type=cmbProdectType.GetText（）；
如果（类型=“--Select-->”）{
document.getElementById（“”.style.display=“无”；
document.getElementById（“”.style.display=“无”；
document.getElementById（“”.style.display=“无”；
document.getElementById（“”.style.display=“无”；
document.getElementById（“”.style.display=“无”；
document.getElementById（“”.style.display=“无”；
document.getElementById（“”.style.display=“无”；
document.getElementById（“”.style.display=“无”；
}
如果（类型=“密封件”）{
document.getElementById（“”.style.display=“block”；
document.getElementById（“”.style.display=“block”；
document.getElementById（“”.style.display=“无”；
document.getElementById（“”.style.display=“无”；
document.getElementById（“”.style.display=“无”；
document.getElementById（“”.style.display=“无”；
document.getElementById（“”.style.display=“无”；
document.getElementById（“”.style.display=“无”；
}
if（类型=“密封件、系统和联轴器”）{
document.getElementById（“”.style.display=“block”；
document.getElementById（“”.style.display=“block”；
document.getElementById（“”.style.display=“block”；
document.getElementById（“”.style.display=“block”；
document.getElementById（“”.style.display=“block”；
document.getElementById（“”.style.display=“block”；
document.getElementById（“”.style.display=“无”；
document.getElementById（“”.style.display=“无”；
}
}
捕获（e）{
警报（e）；
}
}

设计规范

预期输出

在新表中定义第二行
tr
。这样，基于不同条件删除其单元格不会改变布局
不要用CSS隐藏表格单元格，它会导致奇怪的结果（如您所注意到的）。隐藏单元格内的内容。@VDWWD如果我隐藏设计上显示的内容空白。例如，如果从下拉列表中选择“密封件和联轴节”，则显示隐藏的列和平衡列，但在密封件和联轴节之间显示额外的空间。由于这个问题，我试图隐藏TDP，然后用CSS和单元格及其内容的填充/边距来修复它，而不是隐藏单元格本身。
  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>