首页 > 代码库 > JavaScript提高:004:JS获取Gridview单元格时层级问题
JavaScript提高:004:JS获取Gridview单元格时层级问题
使用javascript获取页面中元素的属性,或者对元素进行操作。这种使用是非常多的。不过对于获取那些在页面中单一的元素,诸如,页面上的某个文本框,下拉列表,按钮等可以直接用ID获取到的这种元素,用法自然简单。这里就不多说了,太简单了。
一般比较复杂的是,获取元素中的元素,比如动态生成的那些元素。这里就拿表格中的元素为例吧。知道如何获取表格中的单元格内的元素了,其他的复杂元素也就不在话下了。
下面举个简单的例子,获取GridView的单元格元素。
平常使用比较多的也就是这种的。行中有个操作按钮,然后对这一行的元素进行操作的。
主要代码如下:
页面html和js代码:
对于 “操作1”这一列,这是常用的写法,当前行点击后,
获取当前行则用
看这些元素的结构
然后获取到了行,想获取哪个列就好办了,直接取当前行的cells索引即可。
而对于再复杂一点的“操作2”这一列,
这就得简单分析一下每个parentElement是到那一层级,如下
第一个:<a>级
第二个:<td>级
第三个:<tr>级
第四个:<tbody>级,因为table中隐藏了tbody元素
第五个:<table>级
第六个:<asp:TemplateField>级,到这一级采取到当前row。
一般比较复杂的是,获取元素中的元素,比如动态生成的那些元素。这里就拿表格中的元素为例吧。知道如何获取表格中的单元格内的元素了,其他的复杂元素也就不在话下了。
下面举个简单的例子,获取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
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。