如何在EJS中点击分区中的按钮后获得分区的信息



我在获取分区的数据时遇到了一个问题,同时单击该分区内的按钮。基本上,我试图在cards中显示customers的细节,就像在这张图中一样。

我正在使用像这样的节点js从postgresql获取信息

[
{
"name" : "demo",
"email" : "demo@domain.com",
...
}
]

因此,当我单击任何卡的编辑/删除按钮时,我都希望获得特定customeremail。在这里,我发布了我写的ejs文件。

<body>
<div class="topnav">
<a class="active" href="#home">Home</a>
<a href="#news">News</a>
<a href="<%= contactEndpoint %>">Contact</a>
<a href="#about">About</a>
</div>
<div class="row">
<% for(var i = 0; i < customerData.length; i++) { %>
<div class="column">
<div class="card">
<p><%= customerData[i].name %></p>
<button onclick="document.getElementById('id01').style.display='block'" style="width:auto;"><i class="fa fa-edit"></i></button>
<div id="id01" class="modal">
<form class="modal-content animate" action="http://localhost:3000/edit" method="post">
<div class="imgcontainer">
<span onclick="document.getElementById('id01').style.display='none'" class="close" title="Close Modal">&times;</span>
</div>
<div class="container">
<input type="email" value="<%= customerData[i].email %>" name="email" readonly="readonly" hidden/>
<input type="text" placeholder="name" name="name">
<input type="text" placeholder="phone" name="phone">
<input type="text" placeholder="reminder frequency" name="remfreq">
<button type="submit">Update</button>
</div>
</form>
</div>
</div>
</div>
<% } %>
</div>
<script>
// Get the modal
var modal = document.getElementById('id01');
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>
</body>

我已经编写了<input type="email" value="<%= customerData[i].email %>" name="email" readonly="readonly" hidden/>,因为我想在不让这个输入框对用户可见的情况下获得该customeremail。这里customerData是一个对象数组,它是使用节点js从postgresql中获取的。

怎样才能实现我的目标?

您可以简单地创建一个具有所需参数的函数,并在onClick上调用它。

<button onclick="someFunc(<%= customerData[i].email %>)" style="width:auto;"><i class="fa fa-edit"></i></button>
<script>
// Get the modal
var modal = document.getElementById('id01');
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
function someFunc(email) {
modal.style.display='block';
console.log(email)
}
</script>

最新更新