`

如何通过 javascript 访问 GridView/DataGrid 选中 CheckBox 行各列的值

阅读更多
主要代码
<asp:GridViewID="GridView1"runat="server"AutoGenerateColumns="false">
<Columns>
<asp:TemplateField>
<ItemTemplate>
<asp:CheckBoxID="chkItem1"runat="server"onclick="if(this.checked)alert(getRowValue(this))"/>
<%--OR--%>
<%--<inputtype="checkbox"id="chkItem2"onclick="if(this.checked)alert(getRowValue(this))"/>--%>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateFieldHeaderText="ProductName">
<ItemTemplate><%#Eval("ProductName")%></ItemTemplate>
</asp:TemplateField>
<asp:BoundFieldDataField="UnitPrice"HeaderText="UnitPrice"/>
</Columns>
</asp:GridView>

<scripttype="text/javascript">
/**//**
返回chk所在行的单元格值
@paramchk表示行中的inputtype=check对象
*/

functiongetRowValue(chk)
{
//debugger;
//
if(sender.checked){//根据实际情况,决定是否进行选中状态判断
vartblRow=chk.parentNode.parentNode;
//改变tblRow.cells[<cellIndex>]中占位符<cellIndex>访问不同单元格
//returntblRow.cells[1].innerText+","+tblRow.cells[2].innerText;
returntblRow.cells[1].innerHTML+","+tblRow.cells[2].innerHTML;
//}
}


/**//**
返回指定grdId中所有选中行的单元格值
@paramgrdId表示GridView/DataGrid客户端ID,实际上他们均呈现为<table/>
@paramchkIdPart表示待处理inputtype=check控件的ID中的部分,考虑行中可能存在多个checkbox,通过此参数可以准确确定目标
*/

functiongetAllRowValue(grdId,chkIdPart)
{
//debugger;
vartbl=document.getElementById(grdId);
varchkList;
vartxt="";
/**//*方法1
for(vari=0;i<tbl.rows.length;i++){//遍历行
chkList=tbl.rows[i].getElementsByTagName("input");//返回当前行内嵌的所有input控件
for(varj=0;j<chkList.length;j++){
//多条件准确确定目标checkbox
if(chkList[j].type=="checkbox"&&chkList[j].checked&&chkList[j].id.indexOf(chkIdPart)>-1){
txt+=getRowValue(chkList[j])+"\n";
break;
}
}
}
*/

/**//*方法2*/
chkList
=tbl.getElementsByTagName("input");//返回表内嵌的所有input控件
for(varj=0;j<chkList.length;j++){
//多条件准确确定目标checkbox
if(chkList[j].type=="checkbox"&&chkList[j].checked&&chkList[j].id.indexOf(chkIdPart)>-1){
txt
+=getRowValue(chkList[j])+"\n";
}

}

returntxt;
}

</script>
分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics