首页 > 代码库 > JavaScript提高:004:JS获取Gridview单元格时层级问题

JavaScript提高:004:JS获取Gridview单元格时层级问题

使用javascript获取页面中元素的属性,或者对元素进行操作。这种使用是非常多的。不过对于获取那些在页面中单一的元素,诸如,页面上的某个文本框,下拉列表,按钮等可以直接用ID获取到的这种元素,用法自然简单。这里就不多说了,太简单了。
一般比较复杂的是,获取元素中的元素,比如动态生成的那些元素。这里就拿表格中的元素为例吧。知道如何获取表格中的单元格内的元素了,其他的复杂元素也就不在话下了。
下面举个简单的例子,获取GridView的单元格元素。
平常使用比较多的也就是这种的。行中有个操作按钮,然后对这一行的元素进行操作的。
主要代码如下:
页面html和js代码:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body id="Body1" runat="server">
     <form id="Form1" runat="server">
      <asp:Button ID="btnAdd" runat="server" OnClientClick="return AddNewRow();return false;" Text="增加"/>
      
      <asp:GridView ID="dgPersons" runat="server" EnableViewState="false" CellPadding="4"
       GridLines="Horizontal" PageChange="TextBox" AutoGenerateColumns="False" SortMode="Total" ForeColor="#333333"
       CellSpacing="1" Width="60%" ShowNoRecordTip="True">
     <Columns>


       <asp:TemplateField>
       <ItemTemplate>
         <%#Container.DataItemIndex +1%>
         <input id="hideID" type="hidden" runat="server" value=‘<%#Eval("p_id")%>‘ />
       </ItemTemplate>
       <HeaderTemplate>
           <span>序号</span>
       </HeaderTemplate>
       </asp:TemplateField>


       <asp:TemplateField>
       <ItemTemplate>
        <span> <%#Eval("p_name")%></span>
       </ItemTemplate>
       <HeaderTemplate>
           <span>姓名</span>
       </HeaderTemplate>
       </asp:TemplateField>


        <asp:TemplateField>
       <ItemTemplate>
        <span> <%#Eval("p_age")%></span>
       </ItemTemplate>
       <HeaderTemplate>
           <span>年龄</span>
       </HeaderTemplate>
       </asp:TemplateField>
      
       <asp:TemplateField>
       <ItemTemplate>
        <span> <%#Eval("p_sex")%></span>
       </ItemTemplate>
       <HeaderTemplate>
           <span>性别</span>
       </HeaderTemplate>
       </asp:TemplateField>
  
       <asp:TemplateField>
       <ItemTemplate>
         <a href ="JavaScript:viod(0)"  onclick="return GetCellValue1(this)">获取当前行第一列隐藏的ID</a>
       </ItemTemplate>
       <HeaderTemplate>
           <span>操作1</span>
       </HeaderTemplate>
       </asp:TemplateField>


       <asp:TemplateField>
       <ItemTemplate>
        <table id="tab2" runat="server">
         <tr>
          <td>
             <a href ="JavaScript:viod(0)"  onclick="return GetCellValue2(this)">获取当前行第一列隐藏的ID(在table中)</a>
          </td>
         </tr>
        </table>
       </ItemTemplate>
       <HeaderTemplate>
           <span>操作2</span>
       </HeaderTemplate>
       </asp:TemplateField>


     </Columns>
     <FooterStyle BackColor="#5D7B9D" Font-Bold="True" HorizontalAlign="Center" ForeColor="White" />
            <PagerStyle BackColor="#284775" ForeColor="White" HorizontalAlign="Center" />
            <SelectedRowStyle BackColor="#E2DED6" Font-Bold="True" ForeColor="#333333" />
            <RowStyle HorizontalAlign="Center" />
            <HeaderStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
            <EditRowStyle BackColor="#999999" />
            <AlternatingRowStyle BackColor="White" ForeColor="#284775" />
    </asp:GridView>
    </form>
</body>
<script type="text/javascript" src="/Scripts/Ajax.js"></script>
<script type="text/javascript" src="/Scripts/jquery-1.4.1.js"></script>


<script language="javascript" type="text/javascript">
 
    function GetCellValue1(obj) {
        var row = obj.parentElement.parentElement;
       
        var content = row.cells[0].children[0].value;


        alert(content);


        return false;
    }


    function GetCellValue2(obj) {
        debugger;
        var row = obj.parentElement.parentElement.parentElement.parentElement.parentElement.parentElement;


        var content = row.cells[0].children[0].value;


        alert(content);


        return false;
    }
</script>
</html>
后台绑定数据的
 
      protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                DataTable dt = InitData();


                this.dgPersons.DataSource = dt;


                this.dgPersons.DataBind();
            }
        }


        private DataTable InitData()
        {
            DataTable PersonCollect = new DataTable();


            PersonCollect = new DataTable();


            PersonCollect.Columns.Add("p_id");


            PersonCollect.Columns.Add("p_name");


            PersonCollect.Columns.Add("p_age");


            PersonCollect.Columns.Add("p_sex");


            if (PersonCollect.Rows.Count < 1)
            {
                for (int i = 0; i < 10; i++)
                {
                    DataRow nrow = PersonCollect.NewRow();


                    nrow["p_id"] = System.Guid.NewGuid().ToString();


                    nrow["p_name"] = "西北白杨树";


                    nrow["p_age"] = 27;


                    nrow["p_sex"] = "男";


                    PersonCollect.Rows.Add(nrow);
                }
            }
            return PersonCollect;
        }
主要还是看前台代码。
 
 对于 “操作1”这一列,这是常用的写法,当前行点击后,
 获取当前行则用
         var row = obj.parentElement.parentElement;
         var content = row.cells[0].children[0].value;
obj是传入的参数,也就是代码中的那个this。为什么是两个parentElement呢,
看这些元素的结构
       <asp:TemplateField>
       <ItemTemplate>
         <a href ="JavaScript:viod(0)"  onclick="return GetCellValue1(this)">获取当前行第一列隐藏的ID</a>
       </ItemTemplate>
       <HeaderTemplate>
           <span>操作1</span>
       </HeaderTemplate>
       </asp:TemplateField>
第一个parentElement获取到的是 <a>这一层级,然后第二个parentElement就到了<asp:TemplateField>层级了,也就获取到了这一行。
然后获取到了行,想获取哪个列就好办了,直接取当前行的cells索引即可。

而对于再复杂一点的“操作2”这一列,
       <asp:TemplateField>
       <ItemTemplate>
        <table id="tab2" runat="server">
         <tr>
          <td>
             <a href ="JavaScript:viod(0)"  onclick="return GetCellValue2(this)">获取当前行第一列隐藏的ID(在table中)</a>
          </td>
         </tr>
        </table>
       </ItemTemplate>
       <HeaderTemplate>
           <span>操作2</span>
       </HeaderTemplate>
       </asp:TemplateField>
当触发GetCellValue2(this)后,要获取当前行,代码如下:
         var row = obj.parentElement.parentElement.parentElement.parentElement.parentElement.parentElement;
一看就头疼,用了6个parentElement。
这就得简单分析一下每个parentElement是到那一层级,如下
第一个:<a>级
第二个:<td>级
第三个:<tr>级
第四个:<tbody>级,因为table中隐藏了tbody元素
第五个:<table>级
第六个:<asp:TemplateField>级,到这一级采取到当前row。

效果如下,点击 操作1和操作2都可获取到本行的隐藏元素中的那个guid。


所以对于表格控件中的复杂层级的元素时,要多用快速监视,手动修改表达式进行查看,知道写出能正确读取的那个表达式。

代码下载:http://download.csdn.net/detail/yysyangyangyangshan/7705317