当有多个行/ ID时，一行中特定项目的getElementById

Question

我有一个通过ajax调用填充的表，所以它有n行。

每行中的一列具有一个用于上载文档的按钮。

因为该行是动态的，所以该按钮在每行上具有相同的ID。 问题是，我正在尝试获取每一行的文件，但是由于getElementById无法正常工作（因为有多个具有相同ID的元素，因为存在多个行）而无法做到这一点-它总是只选择第一行。

如果执行以下操作，则可以获取有关文件的一些信息，但不能获取文件本身的信息（因为我无法确定如何获取实际的HTML）：

$('#TableName tbody').on('change', '#uploadFile', function () {
        var file = $(this).closest('tr').find("input[id='uploadFile']")

我可以使用file [0] .value获取文件名，但是我无法获取实际的HTML，因此也无法获取文件。

有没有什么方法可以实际获取HTML，因此文件的每一行都使用相同的ID？ 如果没有，是否可以为每行或其他内容使用不同的ID？

任何帮助是极大的赞赏！

使用javascript / jquery的PS

Answer 1

在HTML中，每个ID必须是唯一的。 您不能在每一行上使用相同的id ，即无效的HTML。

相反，使用class; 如果您之前拥有HTML，请用class替换HTML中的所有id ：

<tr>
  <input id="uploadFile">
</tr>

您应该将其替换为：

<tr>
  <input class="uploadFile">
</tr>

然后您可以使用以下方法将该元素与该类匹配：

$('#TableName tbody').on('change', '.uploadFile', function () {
    var file = $(this).closest('tr').find("input.uploadFile]")

Answer 2

好吧，最终它开始工作了。

将其更改为class，获得单击的当前行索引，执行了document.getElementsByClassName，最后选择了具有该索引的行。

谢谢您的帮助！