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

功能需求



1,  单击 checkbox 返回当前行值

2,  外部按钮获取所有选择行的值





实现说明



参见主要代码，代码为自说明式。

原文地址：http://www.cnblogs.com/Jinglecat/archive/2007/07/15/818967.html



主要代码

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false">

<Columns>                              

<asp:TemplateField>

<ItemTemplate>                        

<asp:CheckBox ID="chkItem1" runat="server" onclick="if(this.checked) alert(getRowValue(this))" />

<%--OR--%>

<%--<input type="checkbox" id="chkItem2" onclick="if(this.checked) alert(getRowValue(this))" />--%>

ItemTemplate>

asp:TemplateField>

<asp:TemplateField HeaderText="ProductName" >

<ItemTemplate><%# Eval("ProductName") %>ItemTemplate>

asp:TemplateField>

<asp:BoundField DataField="UnitPrice" HeaderText="UnitPrice" />

Columns>

asp:GridView>

<script type ="text/javascript">

/**

       返回 chk 所在行的单元格值

       @param chk 表示行中的 input type=check 对象

*/

function getRowValue(chk)

    {   

//debugger;

//        if(sender.checked) {  // 根据实际情况，决定是否进行选中状态判断

            var tblRow = chk.parentNode.parentNode;

// 改变 tblRow.cells[] 中占位符  访问不同单元格

            //return tblRow.cells[1].innerText + ", " + tblRow.cells[2].innerText;

            return tblRow.cells[1].innerHTML + ", " + tblRow.cells[2].innerHTML;

//        }

    }



/**       

       返回指定 grdId 中所有选中行的单元格值

       @param grdId 表示 GridView/DataGrid 客户端 ID，实际上他们均呈现为 

       @param chkIdPart 表示待处理 input type=check 控件的 ID 中的部分，考虑行中可能存在多个 checkbox， 通过此参数可以准确确定目标

*/

function getAllRowValue(grdId, chkIdPart)

    { 

//debugger;

        var tbl = document.getElementById(grdId);

var chkList;

var txt = "";

/* 方法1

        for(var i = 0; i < tbl.rows.length; i++) { // 遍历行

            chkList = tbl.rows[i].getElementsByTagName("input"); // 返回当前行内嵌的所有 input 控件

            for(var j = 0; j < chkList.length; j++) { 

                // 多条件准确确定目标 checkbox

                if(chkList[j].type == "checkbox" && chkList[j].checked && chkList[j].id.indexOf(chkIdPart) > -1) { 

                    txt += getRowValue(chkList[j]) + "
";    

                    break;                

                }

            }

        }*/

/* 方法2 */

        chkList = tbl.getElementsByTagName("input");  // 返回表内嵌的所有 input 控件

        for(var j = 0; j < chkList.length; j++) { 

// 多条件准确确定目标 checkbox

            if(chkList[j].type == "checkbox" && chkList[j].checked && chkList[j].id.indexOf(chkIdPart) > -1) { 

                txt += getRowValue(chkList[j]) + "
";                                    

            }

        }

return txt;

    }

</script>
　　
转载于:https://www.cnblogs.com/dupeng0811/archive/2011/08/18/2144904.html

                

                    
更多相关：
                    

                        

                    

                        
Repeater分页代码
                    
                    

                        

                            
//ASP.NET中的DataList和Repeater提供了简单快速的方法來显示,其间，我们可以使用更是使我们能随心所欲的控制数据的排放样式！
//.可惜的是它们不像Datagrid那样，有内置的分页功能。
//
//如何解决呢？
//
//其实我们可以用【PagedDataSource】 类来解决分页...
                            
                        
                    
				

                    

                        
【讲人话】Angular如何通过@ViewChildren获取实时渲染的动态DOM节点元素（@ViewChild只能获取静态的固定DOM节点）
                    
                    

                        

                            
故事背景：有一天，强哥整了个动态渲染的列表代码如下 
 
app.component.html 
添加一行删除一行

                        
喂~讲真~我很讨厌chrome谷歌浏览器的默认填充输入框input样式咧，敲击讨厌滴啦，怎么去掉介个样式尼
                    
                    

                        

                            
  
  
 
  
//为什么不直接就用input，那是因为这样会覆盖checkbox和radio的样式，我们这里只需要清除输入框的谷歌样式
input[type="text"],
input[type="password"],
input[type="number"],
input[type="tel"]{box-shadow:...
                            
                        
                    
				

                    

                        
CSS3重新定义input中呆若木鸡的默认复选框CheckBox和单选框Radio样式