none
JS取FormView模板中的控件 RRS feed

  • 问题

  • 问题描述:一个页面有一个FormView(以下简称fv)。在fv的EditItemTemplate模板中有一个input按钮。在fv外面有一个Div。我想通过点击input按钮来显示这个Div。但我通过JS去取这个input时取不到。请问这个功能怎么实现?
    zy
    2009年5月19日 6:04

答案

  • e: button
    e.parentElement: Button 所在的 TD
    e.parentElement. parentElement: TD 所在的 TR
    e.parentElement.parentElement.cells[1]: TR中的第二个TD
    e.parentElement.parentElement.cells[1].children[0]: TR中的第二个TD中的第一个控件

    你可以查看网页源代码

    知识改变命运,奋斗成就人生!
    • 已标记为答案 张烨 2009年5月19日 9:08
    2009年5月19日 7:42
    版主

全部回复

  • html
    --------------------------------------------
    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="X200905191437.aspx.cs" Inherits="Controls_FormViews_X200905191437" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <script type="text/javascript">
            function Show(e) {
                var div = e.parentElement.parentElement.cells[1].children[0];
    
                if (div.style.display == "none") {
                    
                    div.style.display = "block";
                    e.value = "Hide";
                }
                else {
                    div.style.display = "none";
                    e.value = "Show";
                }
            }
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
            <asp:formview id="EmployeeFormView"
                allowpaging="true"
                datakeynames="EmployeeKey"
                onpageindexchanging="EmployeeFormView_PageIndexChanging" 
                runat="server" >
            <itemtemplate>
            <table>
                <tr>
                 <td><input type="button" onclick="Show(this);" value="Show" /></td> 
                 <td><div style="display:none">EmployeeId: <%# Eval("DepartmentKey")%>&nbsp;EmployeeName:<%# Eval("Name") %></div></td>
                 </tr>
            </table>
            </itemtemplate>
            <pagersettings position="Bottom" mode="NextPrevious"/> 
          </asp:formview>
    
        
        </div>
        </form>
    </body>
    </html>
    
    
    cs
    ------------------------------------------
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    using System.Data;
    
    public partial class Controls_FormViews_X200905191437 : System.Web.UI.Page
    {
        #region " Employee "
    
        private DataTable fEmployee;
        private DataTable Employee
        {
            get
            {
                if (fEmployee == null)
                {
                    fEmployee = new DataTable();
                    fEmployee.Columns.Add(new DataColumn("EmployeeKey", typeof(int))); // 员工 Id
                    fEmployee.Columns.Add(new DataColumn("DepartmentKey", typeof(int))); // 员工部门 Id
                    fEmployee.Columns.Add(new DataColumn("Name", typeof(string))); // 员工名称
    
                    Random fRandom = new Random();
                    for (int i = 1; i < 10; i++)
                    {
                        fEmployee.Rows.Add(new object[] { i, fRandom.Next(1, 11), string.Format("姓名 {0}", i) });
                    }
                }
    
                return fEmployee;
            }
        }
    
        #endregion
    
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                this.BindFromView();
            }
        }
    
        private void BindFromView()
        {
            this.EmployeeFormView.DataSource = this.Employee;
            this.EmployeeFormView.DataBind();
        }
    
        protected void EmployeeFormView_PageIndexChanging(object sender, FormViewPageEventArgs e)
        {
            this.EmployeeFormView.PageIndex = e.NewPageIndex;
            this.BindFromView();
        }
    }
    
    


    知识改变命运,奋斗成就人生!
    2009年5月19日 7:27
    版主
  • 在后台使用ClientID输出标识
    【孟子E章】
    2009年5月19日 7:28
    版主
  • 谢谢X.X.Y这么快得回复。如果是在DataList的SelectedItemTemplate模板里用您上面的代码是可以通用得吧。
    zy
    2009年5月19日 7:34
  • 方法是可以的,可以根据生成具体的 html 代码来修改获取控件的方法
    知识改变命运,奋斗成就人生!
    2009年5月19日 7:36
    版主
  • var div = e.parentElement.parentElement.cells[1].children[0];
    这段代码我的理解是找到Div,但这个找法的原理是什么?希望能指导下。


    zy
    2009年5月19日 7:39
  • e: button
    e.parentElement: Button 所在的 TD
    e.parentElement. parentElement: TD 所在的 TR
    e.parentElement.parentElement.cells[1]: TR中的第二个TD
    e.parentElement.parentElement.cells[1].children[0]: TR中的第二个TD中的第一个控件

    你可以查看网页源代码

    知识改变命运,奋斗成就人生!
    • 已标记为答案 张烨 2009年5月19日 9:08
    2009年5月19日 7:42
    版主
  • 不过我觉得这方法比较笨:P
    知识改变命运,奋斗成就人生!
    2009年5月19日 7:42
    版主
  • 我在我的代码里试了下,不行。我是写在SelectedItemTemplate模板里的。(代码太长,没法发出来)。现在我想先通过JS来Show出这个button的信息。但alert出来得是空,什么都没有。因为代码太长,无法贴出来。如果需要请加我的MSN:zy60@live.cn。请注明您的论坛名。谢谢先:)


    zy
    2009年5月19日 8:06