title: How to pass GridView IDs and other controls into jQuery functions?
body: <p>I am learning a lot more about jQuery and Javascript, and I am loving it! The power you have over a webform, control, etc with this language beats client-server methodologies hands down!</p>
  
  <p>One of the most common things people do with scripting languages is control Gridview rows and columns. In my case I am trying to control a Gridview within a cell of another gridview. What I want to do is to checkbox all my checkboxes inside the sub GridView control.</p>
  
  <p>Here is my ASP.net code of the main GridView and the sub Gridview in one of the columns:</p>
  
  <pre><code>        **&lt;asp:GridView ID="gvStudents"** runat="server" DataSourceID="SqlDataSourceStudents" AutoGenerateColumns="False" Width="100%" OnRowDataBound="gvStudents_RowDataBound"&gt;
              &lt;HeaderStyle BackColor="#5D7B9D" ForeColor="White" /&gt;
              &lt;AlternatingRowStyle BackColor="#EEEEEE" /&gt;
              &lt;RowStyle BackColor="White" /&gt;
              &lt;Columns&gt;
                  &lt;asp:TemplateField HeaderText="Student" &gt;
                      &lt;ItemTemplate&gt;
                          &lt;asp:Label ID="lblName" runat="server" Text='&lt;%# Eval("StudentName") %&gt;' ToolTip='&lt;%# Eval("ProgramName") %&gt;'&gt;&lt;/asp:Label&gt;
                      &lt;/ItemTemplate&gt;
                      &lt;ControlStyle Width="120px" /&gt;
                  &lt;/asp:TemplateField&gt;
                  &lt;asp:TemplateField HeaderText="Mobile" &gt;
                      &lt;ItemTemplate&gt;
                          &lt;asp:Label ID="lblMobile" runat="server" Text='&lt;%# Eval("StudentMobilePhone") %&gt;'&gt;&lt;/asp:Label&gt;
                      &lt;/ItemTemplate&gt;
                      &lt;ControlStyle Width="70px" /&gt;
                      &lt;ItemStyle HorizontalAlign="Center" /&gt;
                  &lt;/asp:TemplateField&gt;
                  &lt;asp:TemplateField&gt;
                      &lt;HeaderTemplate&gt;
                          &lt;asp:CheckBox ID="cbNOKall" runat="server" Text="Next Of Kin" TextAlign="Left"/&gt;
                      &lt;/HeaderTemplate&gt;
                      &lt;ItemTemplate&gt;
                          **&lt;asp:GridView ID="gvNOKs"** runat="server" AutoGenerateColumns="False" BorderStyle="None" GridLines="Vertical" ShowHeader="false" ShowFooter="false" BackColor="transparent" &gt;
                              &lt;Columns&gt;
                                  &lt;asp:TemplateField HeaderText="Given Name" &gt;
                                      &lt;ItemTemplate&gt;
                                          &lt;asp:Label ID="lblNOKGivenName" runat="server" Text='&lt;%# Eval("NOKname") %&gt;'&gt;&lt;/asp:Label&gt;
                                      &lt;/ItemTemplate&gt;
                                      &lt;ControlStyle Width="150px" /&gt;
                                  &lt;/asp:TemplateField&gt;
                                  &lt;asp:TemplateField HeaderText="NoK Type" &gt;
                                      &lt;ItemTemplate&gt;
                                          &lt;asp:Label ID="lblNOKType" runat="server" Text='&lt;%# Eval("NOKType") %&gt;'&gt;&lt;/asp:Label&gt;
                                      &lt;/ItemTemplate&gt;
                                      &lt;ControlStyle Width="100px" /&gt;
                                      &lt;ItemStyle HorizontalAlign="Center" /&gt;
                                  &lt;/asp:TemplateField&gt;
                                  &lt;asp:TemplateField HeaderText="Mobile" &gt;
                                      &lt;ItemTemplate&gt;
                                          &lt;asp:Label ID="lblNOKMobile" runat="server" Text='&lt;%# Eval("NOKMobile") %&gt;'&gt;&lt;/asp:Label&gt;
                                      &lt;/ItemTemplate&gt;
                                      &lt;ControlStyle Width="100px" /&gt;
                                      &lt;ItemStyle HorizontalAlign="Center" /&gt;
                                  &lt;/asp:TemplateField&gt;
                                  &lt;asp:TemplateField&gt;
                                      &lt;ItemTemplate&gt;
                                          &lt;asp:CheckBox ID="cbNOKAdd" runat="server" onclick="javascript:SelectAllCheckboxesCol(this);" /&gt;
                                      &lt;/ItemTemplate&gt;
                                      &lt;ItemStyle HorizontalAlign="Center" /&gt;
                                  &lt;/asp:TemplateField&gt;
                             &lt;/Columns&gt;
                          &lt;/asp:GridView&gt;
                      &lt;/ItemTemplate&gt;
                      &lt;HeaderStyle HorizontalAlign="Center" /&gt;
                      &lt;ItemStyle HorizontalAlign="Left" /&gt;
                  &lt;/asp:TemplateField&gt;
                  &lt;asp:TemplateField&gt;
                      &lt;HeaderTemplate&gt;
                          &lt;asp:CheckBox id="CheckBoxAll" runat="server" onclick="javascript:SelectAllCheckboxesCol(this);"/&gt;
                      &lt;/HeaderTemplate&gt;
                      &lt;ItemTemplate&gt;
                          &lt;asp:CheckBox ID="CheckBoxAdd" runat="server" onclick="javascript:HighlightRow(this);"/&gt;
                      &lt;/ItemTemplate&gt;
                      &lt;ItemStyle HorizontalAlign="Center" /&gt;
                  &lt;/asp:TemplateField&gt;
              &lt;/Columns&gt;
          &lt;/asp:GridView&gt;
  </code></pre>
  
  <p>Now as you can see, the main GridView has a column of checkboxes and a header checkbox.</p>
  
  <p>I control those checkboxes and the highlights of each row as follows:</p>
  
  <pre><code>    &lt;script type="text/javascript" &gt;
          //jQuery to select all checkboxes on the last column (4th column) of gvStudents
          function SelectAllCheckboxesCol(chk) 
          {
              var cBox = $('#&lt;%=gvStudents.ClientID %&gt; &gt;tbody &gt;tr &gt;td:nth-child(4) &gt; input:checkbox');
              cBox.attr('checked', chk.checked);  //check all the checkboxes
              cBox.click();                       //click them all to fire the Highlightrow() function. This un-ticks the checkboxes!
              cBox.attr('checked', chk.checked);  //re-check them again!
          }
  
          //jQuery to highlight a row selected
          function HighlightRow(chk) {
              var isChecked = chk.checked;
              var $selectedRow = $("#" + chk.id).parent("td").parent("tr");
              var selectedIndex = $selectedRow[0].rowIndex;
              var sColor = '';
  
              if(selectedIndex%2 == 0)
                  sColor = '#EEEEEE';
              else
                  sColor = 'white';
  
              if(isChecked)
                  $selectedRow.css({
                      "background-color" : "Yellow",
                      "color" : "Black"
                  });
              else
                  $selectedRow.css({
                      "background-color" : sColor,
                      "color" : "Black"
                  });
          }
  &lt;/script&gt;
  </code></pre>
  
  <p>My questions are:</p>
  
  <ul>
  <li>How do I do the same but with the "inner" GridView; and,</li>
  <li>How do I pass the Gridview IDs into the jQuery scripts and the column number without having to hardcode them in the script to check all the checkboxes?</li>
  </ul>
  
  <p>Thank you for your time.</p>