Question

I have created a ASP.NET WebForms Gridview and I need to access each row (e.g. the <TR>) of the table in javascript/jquery….
Unfortunately it looks like the <tr>‘s generated by the gridview all have the same ID!

Is there a way to change this? Any ideas how I could access a particular row in javascript (basically I am trying to call a method and pass it the row id that it needs to access).

— More Info —

 <asp:GridView ..>
    <Columns>
      <asp:Templatefield>
        <ItemTemplate>
          <asp:DropDownList onchange="javascript:EnableControls('ROWIDHERE')">
          </asp:DropDownList>
        </ItemTemplate>
      </asp:TemplateField>
    </Columns>
</asp:GridView>

Its the one change of the dropdownlist that needs to know what row its on!

Answer 1

If you let jQuery manange your handlers, you could do something like this using .closest().

$('select').change(function() {
    var $tr = $(this).closest('tr'); 
    // do something with the row
});

This will traverse the ancestors until you get to the <tr>.

If you wanted to stay with the inline handlers, then try something like this:

<asp:DropDownList onchange="javascript:EnableControls(this)">

function EnableControls(elem) {
    var $tr = $(elem).closest('tr'); 
}