Question

我正在使用详细信息视图来显示数据库中的记录以进行编辑 - 或插入新记录。当用户更改其中一个字段中的复选框时，我想隐藏另一个字段。为了避免不必要的回发，我想使用javascript。这是我到目前为止的简化版本：

<script type="text/javascript">
    function HideShowPromo(chk) {
        if (chk.checked == true) 
            //.style.display = 'block';
        else 
            //.style.display = 'none';
    }
</script>

<asp:DetailsView ID="DetailsView1" runat="server" AutoGenerateRows="false">
    <Fields>
        <asp:TemplateField HeaderText="Use Promotional Code:">
            <InsertItemTemplate>
                <asp:CheckBox ID="cbUsePromo" runat="server" />
            </InsertItemTemplate>
            <EditItemTemplate>
                <asp:CheckBox ID="cbUsePromo" runat="server" Checked='<%# Bind("_usePromo") %>' />
            </EditItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="Promotional Code:">
            <InsertItemTemplate>
                <asp:TextBox ID="txtPromoCode" runat="server" MaxLength="10"></asp:TextBox>
            </InsertItemTemplate>
            <EditItemTemplate>
                <asp:TextBox ID="txtPromoCode" runat="server" Text='<%# Bind("_promo") %>' MaxLength="10"></asp:TextBox>
            </EditItemTemplate>
        </asp:TemplateField>
    </Fields>
</asp:DetailsView>

和背后的代码：

protected void Page_Load(object sender, EventArgs e)
{
    if (!Page.IsPostBack)
    {
        DetailsView1.DefaultMode = DetailsViewMode.Insert;              
        ((CheckBox)DetailsView1.FindControl("cbUsePromo")).Attributes.Add("onclick", "HideShowPromo(this)");
    }
}

我已经能够选择“txtPromoCode”文本框并将其隐藏，但它会留下headertext。我想隐藏整个领域。

Answer 1

您应该尝试隐藏整行，因此如果生成的html如下：

<tr>
    <td>Header</td>
    <td><input id='txtPromoCode' /></td>
</tr>

使用javascript选择txtPromoCode并隐藏txtPromoCode.parentNode.parentNode（第一个父级为<td>，第二个为<tr>）

使用javascript隐藏Detailsview字段

1 个答案: