Найти флажок и текстовое поле, размещенные внутри gridview с помощью javascript

данное решение проверен и работает используя только 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 ) + ");");
    }
}

таким образом, мы добавляем вызов функции JavaScript на OnChange событие каждого CheckBox наших GridView. Что особенного, и мы не можем достичь через HTML is что мы проходим Row Index каждого из них в функции JavaScript, то, что нам нужно позже.

2. Некоторые важные примечания для HTML-части

убедитесь, что оба Checkbox управления и Textbox управление но главное код GridView Control имеет статический идентификатор с помощью ClientIDMode="Static" как показано ниже:

<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];
  the [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])

Я также обнаружил, что оператор if (GridView.строки[Row].ячейки[2].type = = "checkbox") приводит к ошибке, GridView.строки[Row].ячейки[2].тип не определен. Код, который я запускаю сейчас, выглядит следующим образом:

    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);
            }                                  
        }

вы можете определить свою сетку следующим образом:

 <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 текстового поля. Когда эта функция вызывается одновременно, она передает параметр это не что иное, как идентификатор textbox.

внутри функции JavaScript с помощью параметра, который является идентификатор текстового поля мы получаем vaue.

вот код :

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

затем для каждого из элементов управления "txtPeriod", доступных внутри сетки, нам нужно назначить значение тока "txtPeriod" значение TextBox на них.

петля сетки для идентификации каждого" txtPeriod " доступны : Вот код :

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

 });

внутри этого цикла нам нужно назначить значение"txtPeriod" (текущее/измененное) другому текстовые поля "txtPeriod".Прежде чем назначить его хорошей практикой, чтобы проверить, является ли это null или NAN. Вот код :

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

Привет здесь у вас есть очень простое решение

предположим, что ваша сетка выглядит так :

<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>

найти элементы управления внутри сетки с помощью Java script:

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);
}

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);