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

JavaScript提高：004：JS获取Gridview单元格时层级问题,布布扣,bubuko.com

时间： 2024-10-04 09:19:39

JavaScript提高：004：JS获取Gridview单元格时层级问题的相关文章

js获取表格单元格中的元素

由于长时间没有练习javaScript的代码,导致现在用起来相当的生疏,前几天要简单的取个表格的元素值,花了很长的时间,这里复习下 功能:点击取值,打印编码,书名 js代码如下: <script type="text/javascript"> var table_main = function(){}; //加载页面信息 table_main.loadpage = function(){ }; //点击操作 table_main.deletetr = function(bt

js合并table单元格实例

这里展示js合并table的单元格,代码亲测可行 后台采用springmvc搭建 Record实体类 public class Record {     public String isp;     public String large_area;     public String province;     public String name;     public String age;       ......   //省略get和set方法  } action方法         

CSS+JS鼠标悬停单元格变色

又一款鼠标悬停表格单元格,表格变色的实例效果,运用了CSS和JS两者技术的结合,因些兼容性非常好,而且易于控制,代码修改方便,跟表格读取动态数据没有任何关系,比较方便. <html><head><title>鼠标悬停单元格变色</title><meta http-equiv="content-Type" content="text/html;charset=gb2312"><style type=&q

Java用POI解析excel并获取所有单元格数据

1.导入POI相关jar包 org.apache.poi jar 2.代码示例 public List getAllExcel(File file, String tableName, String fname, String enterpriseId, String reportId, String projectId) throws FileNotFoundException, IOException, ClassNotFoundException, InstantiationExcepti

获取指定单元格注释的函数

有人在群里问如何获取Excel单元格的注释,就给他写了下面的代码. 1 Function FuncNote(strCell As Range) 2 Application.Volatile 3 FuncNote = strCell.Comment.Text 4 End Function 原文地址:https://www.cnblogs.com/wisever/p/8994725.html

点击表格的单元格时实现变颜色

<title>无标题文档</title> <script type="text/javascript" language="javascript"> //清空 function backs(){ var td= document.getElementsByTagName("td"); for(var i=0;i<td.length;i++){ td[i].style.backgroundColor=&qu

LVC函数重要参数 EDT_CLL_CB：退出可编辑单元格时回调

6. I_GRID_SETTINGS 参数属性该参数用于设置Grid相关参数(打印.单元格回调):类型为:LVC_S_GLAY,该结构包括:01) COLL_TOP_P:最小化 TOP_OF_PAGE02) COLL_END_L:最小化 END_OF_LIST03) TOP_P_ONLY:仅打印TOP_OF_PAGE04) EOL_P_ONLY:仅打印END_OF_LIST05) NO_COLWOPT:不优化打印的列宽***************************************

C# winform datagridview 内嵌控件值改变后立即触发事件，而不需要离开该单元格时才触发，此时需要用到dgv_CurrentCellDirtyStateChanged事件

以下是参考代码 //datagridview内嵌控件值修改事件 private void dgv_CurrentCellDirtyStateChanged(object sender, EventArgs e) { if (dgv.IsCurrentCellDirty) { dgv.CurrentCellDirtyStateChanged -= dgv_CurrentCellDirtyStateChanged; dgv.CommitEdit(DataGridViewDataErrorContex

EXCEL在改动某几个单元格时隐藏空列

概述 今天我哥来找我帮他搞下excel表格,本着程序猿对程序无所不能的精神,我爽快的答应了.结果查了半天才搞定.现在记录在此,供自己以后参考,相信对其他人也有用. PS:这几天正在弄博客,马上就要弄完啦,弄完就把这些手记搬到博客上面啦! 说明 EXCEL的条件格式不能改变单元格的高宽,不能删掉单元格,不能隐藏单元格. 要实现这些功能需要用VBA编写宏,其中用到了EXCEL的Change事件. EXCEL的Change事件是当改变单元格时自动运行的,不需要绑定按钮. 用法 右键点击工作表的标签,然