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

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

2024-07-15 09:10:41   222人阅读

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


联系
我们