使用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)" οnclick="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)" οnclick="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)" οnclick="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)" οnclick="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