单击 td 行时获取 td 值。 MVC

Question

我有一个从 Td 元素中获取正确值的问题。当我单击该元素但没有其他行在工作时，我可以获得表中的第一个元素。我的代码如下所示：

<div id="Users">
                    <table id="UserTable" class="table table-striped table-bordered" width="100%" cellspacing="0">
                        <thead>
                            <tr>
                                <th name="id">ID</th>
                                <th name="UserName">Användarnamn</th>
                                <th>Installation</th>
                                <th>Säljföretag</th>
                            </tr>
                        </thead>
                        <tbody>
                            @foreach (var users in Model.AdminUsers)
                            {
                                <tr>
                                    <td id="userId">@users.Id</td>
                                    <td id="userName" >
                                        <a id="userIds"href="#backdropreport" class="">@users.UserName </a>
                                    </td>
                                    <td>@users.InstallationId</td>
                                    <td>@users.MerchantId</td>
                                </tr>

                            }
                        </tbody>
                    </table>
                </div>

还有我的 Jquery 代码：

            $("#userName").click(function () {
               var id = $("#userId").text();
               $("#user").val(id);
        });

模型内容对话框

<div id="backdropreport">
<div class="modal-content">
    <div class="header">
        <h3>Återställ lösenord</h3>
    </div>
    @using (Html.BeginForm("ResetPassword", "Users", FormMethod.Post)) 
    {
        <div class="copy">
            <div class="form-group">
                <div class="m-form-item">
                    För att återställa lösenordet så tryck på återställ så kommer ett mail skickas med ett nytt lösenord 
                </div>
                <div style="clear: both;">
                    &nbsp;
                </div>
                <div class="m-form-item">
                    <input type="submit" id="reset" value="Återställ" class="btn btn-primary" />
                    <a id="close" href="#" class="btn btn-grey">Stäng</a>
                </div>
                    <div class="m-form-item">
                    </div>
                </div>

            <input type="text" id="user" name="user"  />

        </div>
    }
</div>
<a href="#"><div class="overlay"></div></a>

我想做的是在用户单击用户名时获取特定 td 元素的 id。目前只有表中的第一个元素正在工作。有什么建议吗？

Answer 1

Html 属性“id”应该是唯一的，但是当您执行 foreach 循环时，所有行中的

元素都有 id="userId"。我建议您将 userId 添加到 html id 属性：

<tbody>
    @foreach (var users in Model.AdminUsers)
    {
        <tr>
            <td id="userId_@users.Id">@users.Id</td>
            <td id="userName_@users.Id" >
                <a id="userIds"href="#backdropreport" class="">@users.UserName </a>
            </td>
            <td>@users.InstallationId</td>
            <td>@users.MerchantId</td>
        </tr>

    }
</tbody>

【讨论】：

Answer 2

id 在整个 DOM 文档中应该是唯一的。您可以改用类，并使用.class 选择器。

@foreach (var users in Model.AdminUsers) {
  <tr>
    <td class="userId">@users.Id</td>
    <td class="userName">
      <a class="userIds" href="#backdropreport">@users.UserName</a>
    </td>
    <td>@users.InstallationId</td>
    <td>@users.MerchantId</td>
  </tr>
}

$(".userName").click(function() {
  var userId = $(this).siblings(".userId").text();
  alert(userId);
});