在jQuery中获取表asp.net中选定行的表列值 [英] get table column value of selected row in table asp.net in jQuery

问题描述

我正在研究asp.net mvc项目.

I am working on asp.net mvc project.

我想从选定的行(单击管理"按钮的行)中获取单元格值.在这种情况下为userID的值.

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>

我正在调用jQuery click函数和Ajax调用，并希望将数据中的UserId值从所选行发送到控制器.

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

下面是jQuery ajax调用，

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>

下面是查看屏幕截图，

推荐答案

您的HTML无效，因为按钮中的 id 属性重复.

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

删除 id ="Manage2" ，并替换为该值的类名称和 data-属性

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

这篇关于在jQuery中获取表asp.net中选定行的表列值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！