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

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>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值