Question

How can I access “StudentID” value in JavaScript function(jQuery).

HTML:

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<IEnumerable<Student.Models.vwStudent>>" %>

    <div class="divClass" id="divID">
      <table class="tableClass" id="tableID">
      <% foreach (var item in Model) { %>
        <tr class="trClass" id="trID">
          <td class="tdClass">
            <%= Html.TextBox("StudentID") %>
          </td>
          <td class="tdClass">
            <%= Html.Encode(item.StudentName) %>
          </td>
        </tr>
      <% } %>
      </table>
    </div>

JQuery:

 $('#ShowStudentID').click(function () {        
      $(".tdClass").each(function () {
          alert($('.tdClass').children().val());
       // How do I access StudentID and StudentName here?
      });
 });

Answer 1

If you want to get the value for each td, which seems to be what you want to do, you can use the this keyword within the each loop. Something like this:

$('#ShowStudentID').click(function () { 
    $(".tdClass").each(function () { 
        alert($(this).text()); 
    }); 
 });

Edit:

To get the value of an input within the td element, you could do this within your each-loop instead:

alert($(this).find("input").val());

To make it a bit more specific, you could throw in the attribute equals selector as well:

alert($(this).find("input[name='StudentID']").val());

Edit 2:

To get information from both td elements, you could do something like this instead:

$('#ShowStudentID').click(function () {
    $(".trClass").each(function () { 
          var tds = $(".tdClass", this);
          alert(tds.eq(0).find("input").val());
          alert(tds.eq(1).text());         
    });
});

You loop over the tr elements instead, select each td within it and treat them individually.

Here is a working example as well: http://jsfiddle.net/Hzfz2/