获取 table table asp.net 中所选行的列值 jQuery

Question

我正在处理 asp.net mvc 项目。

我想从所选行（单击 "Manage " 按钮的行）中获取单元格值。在本例中为 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 单击函数和 Ajax 调用并希望将数据中的 UserId 值从选定行发送到控制器。

下面是jQueryajax调用，

    <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>

下面是视图屏幕截图，

Answer 1

由于按钮中的重复 id 属性，您的 html 无效。

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

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

然后在脚本中，使用

获取值

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

或者你可以使用相对选择器

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

Answer 2

您实际上可以在按钮本身上使用 html 5 数据属性 存储 UserId 值。

您当前的代码在循环内硬编码了 Id 属性值，这将创建多个具有相同 Id 值的元素。那是无效的HTML!

删除 Id 并使用更通用的选择器来连接点击事件。这里我在按钮上又加了一个CSSclass"manage"

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

现在

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

您不一定需要添加额外的 css class 只是为了稍后将其用作选择器。由于您要添加 data 属性，因此您也可以简单地将其用于 jQuery 选择器。

$(function () {

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

});

获取 table table asp.net 中所选行的列值 jQuery

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

asp.net

asp.net-mvc

asp.net-mvc-3

asp.net-mvc-4