get table column value of selected row in table asp.net in jQuery

Question

I am working on asp.net mvc project.

I want to get the cell value from the selected row (row in which "Manage "button is clicked). in this case value of userID.

<table width="100%" class="table table-striped table-bordered table-hover" id="dataTables-example">
<thead>
    <tr>
        <th width="45%">User ID</th>
        <th width="45%">User Name</th>
        <th width="5%">View</th>
    </tr>
</thead>
<tbody>
    @foreach (var item in Model.TypeList)
    {
        <tr>
            <td>
                @Html.DisplayFor(modelItem => item.UserId)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.UserName)
            </td>
            <td>
                <input id="Manage2" class="btn btn-primary" type="button" value="Manage" />
            </td>
        </tr>
    }
</tbody>

I am calling jQuery click function and Ajax call and want to send the UserId value in data from selected row to the controller.

below is the jQuery ajax call,

    <script type="text/javascript">
  $(document).ready(function () {
      $('#Manage2').click(function () {
          //alert(1);

          var url = '@Url.Action("ManageUserRole", "UserRoleCompany")';

          $.ajax({
              url: url,
              data: { Id: '1' },
              cache: false,
              type: "POST",
              success: function (data) {
                  $("#Data").html(data);
              },
              error: function (reponse) {
                  alert("error : " + reponse);
              }
          });
      });
    });

</script>

Below is the view screen shot,

Shyju · Accepted Answer · 2018-10-03 05:43:35Z

You can actually store the UserId value with html 5 data attribute on the button itself.

Your current code has Id attribute value hard coded inside a loop, which will create more than one element with same Id value. That is invalid HTML!

Remove the Id and use a more generic selector to wire up the click event. Here I added another CSS class "manage" to the button.

<input data-userid="@item.UserId" class="btn btn-primary manage" 
                                  type="button" value="Manage" />

and now

$(document).ready(function () {    
      $('.manage').click(function () {
         var id = $(this).data("userid");
         alert(id);
         // use id for your ajax call
      });    
});

You do not necessarily need to add the extra css class only to use that as the selector later. Since you are adding a data attribute, you may simply use that as well for your jQuery selector.

$(function () {

    $('[data-userid]').click(function () {
        var id = $(this).data("userid");
        alert(id);
        // use id
    });

});

score 0 · Accepted Answer · 2018-10-03 08:15:48Z

0

You have invalid html because of the duplicate id attributes in your button.

Remove the id="Manage2" and replace with a class name and data- attribute for the value

<input data-id="@item.UserId" class="btn btn-primary Manage2" type="button" value="Manage" />

Then in the script, get the value using

$('.Manage2').click(function () { // class selector
   var id = $(this).data('id);
   var url = '@Url.Action("ManageUserRole", "UserRoleCompany")';
   $.ajax({
      url: url,
      data: { Id: id },
      ....

Alternatively you could use relative selectors

$('.Manage2').click(function () {
    var id = $(this).closest('tr').children('td:first').text();
    ....

edited Oct 3, 2018 at 8:15

answered Oct 3, 2018 at 5:37

user3559349

4 Comments

pankaj bawdane Over a year ago

It is only working on the first row of a table and not working on the second row onwards.

user3559349 Over a year ago

The code I gave works for all rows! What are you claiming is not working, and what error are you getting in the browser console?

pankaj bawdane Over a year ago

When I click the "manage" button from the second row onwards it doesn't hit the jQuery function that's what all I mean. There is no error specific to this in console

user3559349 Over a year ago

Yes it does if you have used the code I have given. But you appear to have an 'Add' button in your view - is that for adding new rows to your table? And if that is the case, then you need to use event delegation to handle dynamically added elements

Collectives™ on Stack Overflow

get table column value of selected row in table asp.net in jQuery

2 Answers 2

Comments

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related