javascript - 使用 javascript 隐藏详细信息 View 字段

Question

我正在使用详细信息 View 来显示数据库中的记录以进行编辑或插入新记录。当用户更改其中一个字段中的复选框时，我想隐藏另一个字段。为了避免不必要的回发，我想使用 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”文本框并将其隐藏，但它保留了标题文本。我想隐藏整个字段。

Answer 1

你应该尝试隐藏整行，所以如果生成的 html 是这样的:

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

使用 javascript 选择 txtPromoCode 并隐藏 txtPromoCode.parentNode.parentNode(第一个父节点是 <td> ，第二个父节点是 <tr> )