时间戳

首页 > 解决方案 > ejs中的动态按钮填充表单域

javascript - ejs中的动态按钮填充表单域

问题描述

我目前正在使用带有 ejs 模板的 NodeJS 和一个 mySQL 数据库。我创建了一个可以动态打印代表数据库中表的表的 ejs：

代码如下所示：

<% for(var i=0; i<info.length; i++) {%>
        <tr>
                <td><b><%= info[i].id %></b></td>

                <td><%= sinfo[i].path %></td>                       
        </tr>
<% } %>

这工作很好。

在同一个 ejs 的某个地方，您可以找到带有输入字段的表单。

看起来像这样：

<input type="text" name="id" placeholder="id input"required>

现在我想在表格的每一行中创建一个按钮。按下按钮时，按钮所在列的 id 条目应填写到我的表单字段中。所以每一行都会有一个按钮！

我找不到实现这一目标的方法。

标签： javascriptjqueryhtmlnode.jsejs

解决方案

这应该有效：

<% for(var i=0; i<info.length; i++) {%>
        <tr>
                <td><b><%= info[i].id %></b></td>
                <td><%= info[i].path %></td>
                <td><input type="button" onclick="document.getElementById('myText').value='<%= info[i].id %>'" value="Click" /></td>             
        </tr>
<% } %>

比将 id 设置myText为您的输入文本：

<input type="text" name="id" id="myText" placeholder="id input">

更简洁的解决方案是在您的 javascript 代码中的某处创建一个函数：

function onClick(id){
  document.getElementById('myText').value=id;
}

所以你的 ejs 代码将是：

<% for(var i=0; i<info.length; i++) {%>
        <tr>
                <td><b><%= info[i].id %></b></td>
                <td><%= info[i].path %></td>
                <td><input type="button" onclick="onClick('<%= info[i].id %>')" value="Click" /></td>             
        </tr>
<% } %>

推荐阅读