jQuery更改表中按钮的事件

问题描述

我有一个html表或html表中的数据网格。每行都有一个不同的用户信息和一个将文档上传到该用户的按钮。该表内置于for循环中。 jQuery总是返回第一行的ID。

如何识别用于jquery更改事件的按钮，以读取单击该按钮的行的用户ID？

或者还有其他方法可以解决此问题？请告知。

<tr>
    <td>@u.FirstName</td>
    <td>@u.LastName</td>
    <td>
       <input type="file" class="uploadResume" id="Resdoc" userId="@u.ID" style="display:none" accept="application/pdf" />
       <label for="Resdoc" class="btn btn-info mr-2" style="background-color:#336084;color:white;font-size:12px;">Resume</label>
    </td>
</tr>

解决方法

您可以使用按钮类的$（this）选择器：

$(document).on("click",".btn",function() {
  var x = $(this).siblings(".uploadResume");
  alert(x.attr("userId"));
  // do something
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
  <td>@u.FirstName</td>
  <td>@u.LastName</td>
  <td>
    <input type="file" class="uploadResume" id="ResDoc" userId="A1" style="display:none" accept="application/pdf" />
    <label for="ResDoc" class="btn btn-info mr-2" style="background-color:#336084;color:white;font-size:12px;">Resume</label>
  </td>
</tr>
<tr>
  <td>@u.FirstName</td>
  <td>@u.LastName</td>
  <td>
    <input type="file" class="uploadResume" id="ResDoc" userId="B2" style="display:none" accept="application/pdf" />
    <label for="ResDoc" class="btn btn-info mr-2" style="background-color:#336084;color:white;font-size:12px;">Resume</label>
  </td>
</tr>
<tr>
  <td>@u.FirstName</td>
  <td>@u.LastName</td>
  <td>
    <input type="file" class="uploadResume" id="ResDoc" userId="C3" style="display:none" accept="application/pdf" />
    <label for="ResDoc" class="btn btn-info mr-2" style="background-color:#336084;color:white;font-size:12px;">Resume</label>
  </td>
</tr>
</table>

,

我假设您还会有其他列，因此我编写了jQuery代码以查找所有的恢复按钮，并让它们在单击时记录其userId。代码如下。

var uploadBtns = $(".uploadResume"); // the upload button(s)

uploadBtns.each(function() {
  $(this).click(function() {
    console.log($(this).attr("userId"));
  })
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tbody>
    <tr>
      <td>@u.FirstName</td>
      <td>@u.LastName</td>
      <td>
        <input type="file" class="uploadResume" id="ResDoc" userId="@u.ID" style="display:none" accept="application/pdf" />
        <label for="ResDoc" class="btn btn-info mr-2" style="background-color:#336084;color:white;font-size:12px;">Resume</label>
      </td>
    </tr>
  </tbody>
</table>