使用 JQuery 将值从表复制到模式

Question

我有一个表格，其中列出了我的所有数据。 数据是在for循环中打印的，所以表中有很多行。如何在单击按钮的情况下获取行中的用户ID？

<table>
        <td>
            <input type="hidden" value="<c:out value="${user.id}" />" name="userId" />                          
        </td>
        <td>
        <button class="btn btn-default fileUpload" data-toggle="modal" id="btnUpload" data-target="#file-modal" value="<c:out value="${user.id}" />">Upload</button></td>
</table>

我有一个 modal 容器。当点击表格中的上传按钮时，modal会打开文件上传。

<form action="${pageContext.request.contextPath}/UserServlet" enctype="multipart/form-data" method="post">
                    <input type="hidden" value="5519" name="OPS" />
                    <input type="hidden" name="uploadUserId" />
                    <div class="form-group">
                        File : <input type="file" class="file" name="uploadFile"><br />
                        <button type="submit" class="btn btn-default">Upload</button>
                        <br /><br />
                    </div>
                </form>

我想要做的是click btnUpload hidden 输入类型 userId 中的值> 将被复制到 hidden 值类型 uploadUserId

我尝试过以下操作，但都不起作用

1

$(document).ready(function () {
    $("#btnUpload").click(function(){
        var $userId = $(this).closest("tr").find("#userId").text();
        $("#uploadUserId").val($userId);
    }); 
});

2

 $(document).ready(function () {
        $("#btnUpload").click(function(){
            var $userId = $(this).closest("tr").children()[2].text();
            $("#uploadUserId").val($userId);
        }); 
});

Answer 1

这将在不更改 html 的情况下解决问题

$(document).ready(function () {
    $("#btnUpload").click(function(){
        var $userId = $(this).parent().prev("td").children("input:hidden").val();
        $("#uploadUserId").val($userId);
    }); 
});

另一种解决方案是在输入元素中添加ID，如下所示，

  <input id="userVal" type="hidden" value="<c:out value="${user.id}" />"name="userId" /> 

那么你可以从下面的jquery中获取值

   $("#userVal").val();

Answer 2

这应该可行。只需选择并获取用户 ID txt，然后将其传递给 uploadUserId 值。

$(document).ready(function () {
    $("#btnUpload").click(function(){
        var $userId = $('#userId').text();
        //$("#uploadUserId").val($userId);
        $('input[name="uploadUserId"]').val($userId);
    }); 
});

更新

好的。我使用您的 HTML 结构再次审查了这一点，并解决了这一切。下面的代码有效。

$('[type="submit"]').on('click', function(e){
    e.preventDefault(); // prevents the button default action. You can remove this if you want the form to submit after click.
    var $userId = $(this).prev().prev().val(), // this gets the input value. based on your html it is the previous previous element.
        fix1 = $userId.replace(/(?:\..+)$/, '').split('\\'), // this is a regex that replces the file extention then splits the string on the back slash turning it into an array.
        fix2 = fix1.length -1; // gets the length of the array and subtracts 1 to get the last array index of the array. This i to get the file name.

    $('[name="uploadUserId"').val(fix1[fix2]); // this assigns the uploadUserId value to the name of the file using the  array and the index.
});