Masquer les détails champ d'affichage avec javascript

Question

J'utilise une vue détaillée pour afficher un enregistrement de la base de données pour l'éditer - ou pour insérer un nouvel enregistrement. Quand une case à cocher dans l'un des champs est modifiée par l'utilisateur, je veux cacher un autre champ. Pour éviter les postbacks inutiles, je veux utiliser javascript. Voici une version simplifiée de ce que j'ai jusqu'à présent:

<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>  

et le code derrière:

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

Je suis en mesure de sélectionner la zone de texte « txtPromoCode » et de le cacher, mais il laisse la en-tête. Je veux cacher tout le champ.

Answer 1

Vous devriez essayer de cacher toute la ligne, donc si le code HTML généré est comme:

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

Sélectionnez le txtPromoCode avec javascript et cacher txtPromoCode.parentNode.parentNode (premier parent est <td>, deuxième est <tr>