如何循环生成多个modal，弹出对应的表单弹窗

最新推荐文章于 2023-06-26 17:23:03 发布

小筱1201

最新推荐文章于 2023-06-26 17:23:03 发布

阅读量530

点赞数

分类专栏：前端文章标签：前端 node.js html5

本文链接：https://blog.csdn.net/qq_44976743/article/details/125237712

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

ejs如何循环生成多个modal，弹出对应的表单弹窗

整个环境用的node.js，模板引擎是选用的ejs（前端文件的后缀不是常规的html，而是ejs，实际上内容跟HTML差不多），从后端拿到数组传递到前端后，我希望通过循环的方式生成对应的多个modal，多次尝试不成功，最终实现，这里只贴了前端的代码，示例代码如下，仅供参考：

            <tbody>
              <!-- <tr>
                <td>now</td>
                <td>now</td>
                <td>1234</td>
                <td>huanglixia</td>
                <td>password</td>
                <td><a>修改</a><a>/</a><a>删除</a></td>
              </tr> -->
              <% for(var i=0,len = all_teacher.length; i<len; i++){ %>
              <tr>
                <td><%= all_teacher[i]['tAddTime'] %></td>
                <td><%= all_teacher[i]['tLastTime'] %></td>
                <td><%= all_teacher[i]['teacherId'] %></td>
                <td><%= all_teacher[i]['tName'] %></td>
                <td><%= all_teacher[i]['tPassword'] %></td>
                <td>
                  <button class = "btn" style="outline: none;" data-toggle="modal" data-target="#<%= i %>">修改</button>
                  <a>&nbsp;|&nbsp;</a>
                  <button class = "btn" style="outline: none;" href="/manage_teacher/<%= all_teacher[i]['teacherId'] %>/remove">删除</button></td>

                  <!-- 模态框（Modal）-->
                  <div class="modal fade" id="<%= i %>" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                    <div class="modal-dialog">
                      <div class="modal-content">
                        <div class="modal-header">
                          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                            &times;
                          </button>
                          <h4 class="modal-title" id="myModalLabel">
                            修改教师信息===<%= all_teacher[i]['teacherId'] %>
                          </h4>
                        </div>
                        <form class="form segment" action="/manage_teacher/<%= all_teacher[i]['teacherId'] %>/edit" method="post" enctype="multipart/form-data">
                        <div class="modal-body">
                          <div class="eight wide column">

                              <div class="form-group field required">
                                <label class="col-sm-3 control-label">教师ID</label>
                                <div class="col-sm-9"><input class="form-control" type="text" name="teacherId" id="disabledTextInput" placeholder=<%= all_teacher[i]['teacherId'] %> disabled="disabled"></div>
                              </div>
                              <div class="form-group field required">
                                <label class="col-sm-3 control-label">教师姓名</label>
                                <div class="col-sm-9"><input class="form-control" type="text" name="tName" placeholder=<%= all_teacher[i]['tName'] %> ></div>
                              </div>
                              <div class="form-group field required">
                                <label class="col-sm-3 control-label">新密码</label>
                                <div class="col-sm-9"><input class="form-control" placeholder="请输入新密码" type="password" name="tPassword"></div>
                              </div>
                              <div class="form-group field required">
                                <label class="col-sm-3 control-label">重复密码</label>
                                <div class="col-sm-9"><input class="form-control" placeholder="请再次输入密码" type="password" name="tRePassword"></div>
                              </div>

                          </div>
                        </div>

                        <div class="modal-footer">
                          <button type="button" class="btn btn-default" style="outline: none;" data-dismiss="modal">关闭</button>
                          <input type="submit"  class="btn btn-primary" style="outline: none;" value="提交">
                        </div>
                      </form>
                      </div><!-- modal-content -->
                    </div><!-- modal-dialog -->
                  </div><!-- modal -->
              </tr>
              <% } %>
            </tbody>