如何解决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>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。