使用javascript查找放置在gridview中的复选框和文本框

Posted 2023-02-22

【中文标题】使用javascript查找放置在gridview中的复选框和文本框

【英文标题】：Find checkbox and textbox placed inside gridview using javascript

【发布时间】：2011-09-09 23:30:32

【问题描述】：

我想获取放置在网格视图中的复选框的值。如果选中复选框，则应启用该行中的文本框，如果再次取消选中，则文本框应清除并禁用。几个小时前我问了这个问题，但仍然没有得到满意的答案。 我试过这样。

//我的网格代码。

<asp:GridView ID="DeptGrid" runat="server" AutoGenerateColumns="False">
                <Columns>
                    <asp:BoundField DataField="DeptId" HeaderText="ID"/>
                    <asp:BoundField DataField="DeptName" HeaderText="Department"/>
                    <asp:TemplateField>
                        <ItemTemplate>
                            <asp:CheckBox ID="addToCompanyBox"  onClick="EnableHODBox()" runat="server" />
                        </ItemTemplate>
                        <HeaderTemplate>
                            Add
                        </HeaderTemplate>
                    </asp:TemplateField>
                    <asp:TemplateField>
                        <ItemTemplate>
                            <asp:TextBox ID="hodNameBox" runat="server" Width="200px" Enabled="false"></asp:TextBox>
                        </ItemTemplate>
                        <HeaderTemplate>
                            Dept Head
                        </HeaderTemplate>
                    </asp:TemplateField>
                </Columns>
            </asp:GridView>

//我的javascript代码

<script type="text/javascript">
 function EnableHODBox() 
     //alert('hello');
     var GridView = document.getElementById('<%=DeptGrid.ClientID %>');
     //var GridView = document.getElementById('');
     var DeptId;
     if (GridView.rows.length > 0) 
         for (Row = 1; Row < GridView.rows.length; Row++) 
            // DeptId = GridView.rows.cell[0];
             if (GridView.rows[Row].cell[3].type == "checkbox")
             // var chkbox = GridView.rows[Row].cell[3].type == "checkbox"
                 (GridView.rows[Row].cell[3].type).checked = true;
         
     
 
 </script>

【问题讨论】：

你保存函数的地方，你调用它的地方。粘贴代码表示赞赏

您是否希望在选中特定行的复选框时能够找到相应的文本框？

我遇到了问题。实际上它需要在“onclick”事件中调用。

【参考方案1】：

此解决方案已测试并且工作仅使用JavaScript（不需要jQuery这个解决方案！）。

1。 C# 部分（在Page_Load 方法中）

在Page_Load 中我们需要添加一个小技巧：

foreach(GridViewRow row in YourGridViewControlID.Rows)

    if (row.RowType == DataControlRowType.DataRow )
    
      ((CheckBox) row.FindControl("YourCheckBoxID")).Attributes.Add("onchange", "javascript:TextboxAutoEnableAndDisable(" + (row.RowIndex ) + ");");
    

这样，我们在GridView 的每个CheckBox 的OnChange 事件上添加JavaScript 函数调用。通过html 无法实现的特殊之处在于，我们在JavaScript 函数中传递了每个Row Index，这是我们以后需要的。

2。 HTML 部分的一些重要说明

确保Checkbox 控制和Textbox 控制，但更重要的是您的GridView 控制使用ClientIDMode="Static" 具有静态ID，如下所示：

<asp:CheckBox ID="YourCheckBoxID" runat="server" ClientIDMode="Static"/>
<asp:TextBox ID="YourTextBoxID" TextMode="SingleLine" runat="server" ClientIDMode="Static" />

对于GridView 控件：

<asp:GridView ID="YourGridViewControlID" ...... ClientIDMode="Static" runat="server">

3。 Javascript 部分

然后在你的 JavaScript 文件/代码中：

function TextboxAutoEnableAndDisable(Row) 
  // Get current "active" row of the GridView.
  var GridView = document.getElementById('YourGridViewControlID');
  var currentGridViewRow = GridView.rows[Row + 1];

  // Get the two controls of our interest.
  var rowTextBox = currentGridViewRow.cells[2].getElementsByTagName("input")[0];
  var rowCheckbox = currentGridViewRow.cells[0].getElementsByTagName("input")[0];

  // If the clicked checkbox is unchecked.
  if( rowCheckbox.checked === false) 
    // Empty textbox and make it disabled
    rowTextBox.value = "";
    rowTextBox.disabled = true;
    return;
  

  // To be here means the row checkbox is checked, therefore make it enabled.
  rowTextBox.disabled = false;

4。上述实现的一些注意事项

请注意，在 JavaScript 代码中的以下行：var currentGridViewRow = GridView.rows[Row + 1];[Row + 1] 对完成这项工作很重要，不应更改。 最后：

以下几行：

var rowTextBox = currentGridViewRow.cells[2].getElementsByTagName("input")[0];
var rowCheckbox = currentGridViewRow.cells[0].getElementsByTagName("input")[0];

.cells[2] 和.cells[0] 对您来说可能不同，因此您必须在[] 中选择正确的数字。 通常，这将是您的GridView 的列号，从0 开始计数。

因此，如果您的 CheckBox 位于 GridView 的第一列，那么您需要 .cells[0]。 如果您的TextBox 在GridView 的第二列中，那么您需要.cells[1]（在我上面的例子中，TextBox 在我的GridView 的第三列中，因此，我使用了.cells[2]）

【参考方案2】：

您可以使用onclick JavaScript 代替作为 CheckBox 服务器端事件的OncheckedChanged 事件。

<asp:CheckBox ID="CheckBox2" runat="server" onclick="Javascript:JSfunctionName();" />

编辑：

var GridView = document.getElementById('<%=DeptGrid.ClientID %>')

编辑：根据您的评论要求

 if (GridView.rows[Row].cell[2].type == "checkbox")
 
    if (GridView.rows[Row].cell[2].childNodes[0].checked)
    
       GridView.rows[Row].cell[3].childNodes[0].disabled=false;// Enable your control here
    
 

【讨论】：

@Muhammad Akhtar...我可以通过这种方法调用我的 javascript。但是，当我尝试使用“var GridView = document.getElementById('DeptGrid')”查找 gridview 时，它显示为 null，即使页面上存在网格视图

@Muhammad ..谢谢亲爱的...你的答案总是对我有用。但我的实际问题有些不同。我将我的问题分成少数问题只是为了让它更简单。我已经更新了我的问题。请看一看。我希望你的回答能再次帮助我......

@Muhammad ..我以前和这次都试过这样。它在 if (GridView.rows[Row].cell[3].type == "checkbox") 语句中显示了一些错误。它不会进入 if 块

我再次更新了我的答案。好像是 Cell index 问题，我更新了 Index issues。

@Muhammad...我也试过这个，但是当我继续观察时，它显示错误'TypeError: GridView.rows[Row].cell is undefined'。我不明白为什么它在 if 块中显示未定义，而它似乎在它之前的其他部分完美工作..

【参考方案3】：

我还发现 if (GridView.rows[Row].cell[2].type == "checkbox") 语句会报错，GridView.rows[Row].cell[2].type is undefined .我现在运行的代码如下：

    var grid = document.getElementById('<%=grdResults.ClientID%>');
    if (grid.rows.length > 0) 
        for (row = 1; row < grid.rows.length; row++) 
            if (grid.rows[row].cells[0].childNodes[0].checked) 
                // do something here
                alert('function for row ' + row);
                                              
        

【参考方案4】：

你可以这样定义你的网格：

 <div>
   <asp:GridView ID="GridView1" runat="server"  Width = "550px"
    AutoGenerateColumns = "false" Font-Names = "Calibri" 
    Font-Size = "12pt" HeaderStyle-BackColor = "LightYellow" AllowPaging ="true"  ShowFooter = "true"  OnPageIndexChanging = "OnPaging" PageSize = "10" >
   <Columns>
      <asp:TemplateField ItemStyle-Width = "100px"  HeaderText = "Name">
        <ItemTemplate>
         <asp:TextBox ID="txtPeriod" runat="server" CssClass="css1 mycss" Text='<%# Eval("Period")%>' 
             onblur="SetPostingPeriod(this)"></asp:TextBox>
        </ItemTemplate>                       
    </asp:TemplateField>   
   </Columns> 
   <AlternatingRowStyle BackColor="#C2D69B"  />
</asp:GridView> 
</div>

您的 Javascript 函数将是：

<script language="javascript" type="text/javascript">
     /* Populating same data to all the textboxes inside grid, 
     once change of text for one textbox - by using jquery
     */
     function SetPostingPeriod(obj) 

         var cntNbr = $("#" + obj.id).val();
      // var cntNbr = document.getElementById(obj.id).value;
      // alert(cntNbr);

         //Access Grid element by using name selector
         $("#<%=GridView1.ClientID %> input[name*='txtPeriod']").each(function (index) 

             if ($.trim($(this).val()) != "")
                 if (!isNaN($(this).val())) 
                     $(this).val(cntNbr);
                 
         );
     
 </script>

这个 Javascript 函数被称为文本框的 onblur 事件。 当这个函数被同时调用时，它会传递一个参数 这不过是文本框 id。

在javascript函数中使用参数是 我们正在获取值的文本框的 id。

代码如下：

      var cntNbr = $("#" + obj.id).val();

然后对于网格内可用的每个“txtPeriod”控件，我们需要分配 当前“txtPeriod”文本框值的值。

循环网格以识别每个可用的“txtPeriod”： 这是代码：

 $("#<%=GridView1.ClientID %> input[name*='txtPeriod']").each(function (index) 

 );

在这个循环中，我们需要将“txtPeriod”（当前/修改）值分配给其他 "txtPeriod" 文本框。在分配其良好做法之前检查它是 null 还是 NAN。 这是代码：

               if ($.trim($(this).val()) != "")
                 if (!isNaN($(this).val())) 
                     $(this).val(cntNbr);
                 

【参考方案5】：

您好，您的解决方案非常简单

假设你的网格是这样的：

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" Height="64px"
    Width="389px" EnableViewState="False">
    <Columns>
        <asp:TemplateField HeaderText="EmployeeId">
            <ItemTemplate>
                <asp:Label ID="lblEmployeeId" runat="server" Text=""></asp:Label>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="FirstName">
            <ItemTemplate>
                <asp:Label ID="lblFirstName" runat="server" Text=""></asp:Label>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="LastName">
            <ItemTemplate>
                <asp:Label ID="lblLastName" runat="server" Text=""></asp:Label>
            </ItemTemplate>
        </asp:TemplateField>
    </Columns>
    <HeaderStyle BackColor="#FF66FF" ForeColor="#660033" />
</asp:GridView>

你的 javascript 在你的网格中查找控件是

   <script language="javascript" type="text/javascript">
        $(document).ready(function () 
            $("#btnAddToGrid").click(function () 
                var $grid = $('#<%=GridView1.ClientID %>');
                var $row = $grid.find('tr:last').clone().appendTo($grid);
                var employeeId = $row.find("span[id*='lblEmployeeId']").text();
                var firstname =  $row.find("span[id*='lblFirstName']").text();
                var lastname = $row.find("span[id*='lblLastName']").text();
              alert("ID :" + employeeId +"\n" + "Name :" + firstname +" "+ lastname );
            );
        );
    </script>

【参考方案6】：

使用 java 脚本在网格内查找控件：

for (var r = 1; r < grid.rows.length; ++r) 

    var indexValue = 0; //based on browser. //IE8
    var txtPeriod= grid.rows[r].cells[2].childNodes[indexValue];
    if (typeof (txtPeriod.value) == "undefined")//IE9                      
        indexValue = 1
     var txtPeriod= grid.rows[r].cells[2].childNodes[indexValue];
     alert(txtPeriod.value);

【参考方案7】：

var x = document.getElementById('<%=grdResults.ClientID%>').querySelectorAll("input");
var i;
var cnt = 0;
for (i = 0; i < x.length; i++) 
     if(x[i].type== "checkbox" && x[i].checked)
     cnt++;

alert("item selected=" + cnt);

【讨论】：

回答问题时，请格式化您提供的代码并解释您在做什么。