使用JS查找表项

Question

我有一张这样的表

表

<table id="adminTable" style="display: inline-block">
    <tbody>
        @foreach (var person in @Model)
        {       
            <tr>
                <td style="padding: 10px;">
                    <div id="userName" style="display: inline-block">
                        <h4 name="person" id="goProfile" class="elements" style="cursor: pointer; display: inline-block">@person.DisplayName</h4>
                    </div>
                    <div id="userButton" style="display: inline-block;float: right" >
                        <a id="update" href="#" class="btn btn-info" style="margin-left: 6px;">Update User</a>
                        <a id="delete" href="#" class="btn btn-warning" style="margin-left: 6px;">Delete User</a>
                    </div>
                </td>
            </tr>   


        }
    </tbody>
</table>

看起来像这样;

我需要为这些人更新或删除操作。我需要知道当我按下updateUser | DeleteUser按钮时，我必须到达USERNAME进行编辑或删除。

我的JS在这里，但错了:(

JS

 $('#adminTable')
          .find('tr')
          .click(function () {
              debugger;
              var userName = $(this).find('td').text();
              var operation = parseInt($('tr').index()) + 1;
              $.ajax({
                  url: "/Admin/deleteUser",
                  type: 'POST',
                  data: { "DisplayName": userName, "op": operation },
                  success: function (data) {
                      window.location.href = 'Profile/ProfileScreen/?name=' + data.displayName;
                  }
              });
          });

在这段代码中，我有一个操作变量。如果我能找到我在做什么，我可以与ajax建立联系，但我无法达到。

非常感谢。现在我可以睡觉了......

Answer 1

在开始之前，请确保您没有将重复的Id值分配给多个元素。您当前的代码正在为循环内的元素设置相同的id值。这是无效的HTML！

您可以在这些按钮上保留要传递html 5数据属性的信息。

<a href="#" class="user-action btn btn-info"  
        data-url="@Url.Action("deleteUser","admin")" 
        data-username="@person.DisplayName" 
        data-op="update" >Update User</a>

<a href="#" class="user-action btn btn-warning" 
        data-url="@Url.Action("deleteUser","admin")" 
        data-username="@person.DisplayName" 
        data-op="delete">Delete User</a>

现在您所要做的就是读取此数据属性值并根据需要使用。

$(function(){

   $(".user-action").click(function(e){
       e.preventDefault();
       var d= { DisplayName : $(this).data("username"),
                Operation : $(this).data("op")
              };
       var yourUrl= $(this).data("url");
       // now make the ajax call

      $.ajax({
              url: yourUrl,
              type: 'POST',
              data: d,
              success: function (data) {

               // do something with the response data.
              }
          });  
   });

});

Answer 2

您可以在按钮上绑定click事件，使用它可以在父标记中找到用户名和操作。

＆＃13;

＆＃13;

 $('#adminTable').on("click","a",function () {
             
              var  userName = $(this).parent().parent().find(".elements").text();
              var operation = $(this).text();
            console.log("oper",operation);
              console.log("userName",userName);
             
          });

＆＃13;

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="adminTable" style="display: inline-block">
        <tbody>
     
                <tr>
                    <td style="padding: 10px;">
                        <div id="userName" style="display: inline-block">
                            <h4 name="person" id="goProfile" class="elements" style="cursor: pointer; display: inline-block">Dave</h4>
                        </div>
                        <div id="userButton" style="display: inline-block;float: right" >
                            <a id="update" href="#" class="btn btn-info" style="margin-left: 6px;">Update User</a>
                            <a id="delete" href="#" class="btn btn-warning" style="margin-left: 6px;">Delete User</a>
                        </div>
                    </td>
                </tr>          
        </tbody>
  </table>

＆＃13;

＆＃13;

＆＃13;