javascript - 使用 JQuery 将值从表复制到模态

标签 javascript jquery html onclick buttonclick

我有一个表格,其中列出了我的所有数据。 数据是在 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>

我有一个模态容器。单击表中的上传按钮后,模式将打开以供文件上传。

<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>

我想做的是在btnUpload点击隐藏输入类型userId中的值> 将被复制到隐藏值类型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);
        }); 
});

最佳答案

这将在不改变 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();

关于javascript - 使用 JQuery 将值从表复制到模态,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38493852/

相关文章:

html - 具有两个等高子项的 Flexbox 布局,其中一个包含带有滚动内容的嵌套 Flexbox

javascript - 在 componentDidMount() 中使用 React.setState 来获取嵌套 Promise 中返回的数据?

javascript - 如何更改 (jQuery) FullCalendar 中事件源的颜色?

javascript - getjson 查询不起作用

javascript - 在 iframe 加载时加载文本

html - 使用 class ="sponsor_logo"或 class ="sponsor-logo"不会显示 div

javascript - 在javascript中动态生成id引用的问题

javascript - HTML5 Canvas - 当它超出我的矩形时隐藏文本部分

javascript - 如何使用 promise 链接多个 setTimeout 函数?

javascript - 简单的 javascript 调用失败