bootstrap模态框modal传值问题-创新互联

https://blog.csdn.net/wuyan1001/article/details/54633030

隆阳网站制作公司哪家好，找创新互联公司！从网页设计、网站建设、微信开发、APP开发、响应式网站开发等网站项目制作，到程序开发，运营维护。创新互联公司从2013年创立到现在10年的时间，我们拥有了丰富的建站经验和运维经验，来保证我们的工作的顺利进行。专注于网站建设就选创新互联公司。

html代码：

 <table id="datatable" class="table table-bordered table-hover table-striped"
                                       >
                                    <thead>
                                    <tr>
                                        <th class="table-title">编号</th>
                                        <th width="80" class="table-title">模块名称</th>
                                        <th width="80" class="table-title">中文名字</th>
                                        <th width="80" class="table-title">接口名字</th>
                                        <th width="85" class="table-title">请求header</th>
                                        <th class="table-title">请求参数</th>
                                        <th class="table-title">请求body</th>
                                        <th width="70" class="table-title">响应断言</th>
                                        <th width="60" class="table-title">需求流水号</th>
                                        <th class="table-title">操作</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <tr th:each="pagefo:${pageInfo.list}">
                                        <td th:text="${pagefo.id}"></td>
                                        <td th:text="${pagefo.moduleName}"></td>
                                        <td th:text="${pagefo.remark}"></td>
                                        <td>
                                            <a th:href="@{/api/test_list/}+${pagefo.interName}">[[${pagefo.interName}]]</a>
                                        </td>
                                        <td th:text="${pagefo.requestHeader}"></td>
                                        <td th:text="${pagefo.parameter}"></td>
                                        <td th:text="${pagefo.requestBody}"></td>
                                        <td th:text="${pagefo.responseAssertion}"></td>
                                        <td th:text="${pagefo.serialNumber}"></td>
                                        <td>
                                            <!--id="InterRunId"-->
                                            <button type="button"
                                                    data-target="#editVoince" data-id="edit"
                                                    class="fa fa-bug btn  btn-round btn-success"  data-toggle="modal"
                                                    th:href="@{/run/}+${pagefo.id}" th:onclick="'javascript:check('+${pagefo.id}+')'">运行
                                            </button>
                                            <a type="button" class="fa fa-edit btn btn-round btn-info"
                                               th:href="@{/api/editInter/}+${pagefo.id}">编辑</a>
                                            <a type="button" class="fa fa-trash-o btn  btn-round btn-danger"
                                               th:href="@{/api/deletInterfaceInfo/}+${pagefo.id}">删除</a>
                                        </td>
                                    </tr>
                                    </tbody>
                                </table>

模态对话框

<!-- model start -->
<form action="saveSupplier" method="POST">
<div class="modal fade" id="editVoince" 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">×</button>
              <h5 class="modal-title">接口信息</h5>
          </div>
          <div class="modal-body">
             <div class="planel_boxs">
                 <div class="row"> 
                     <div class="row_line col-md-6 col-sm-6 col-xs-12">
                         <label>接口名字：</label>
                         <input type="text" class="form-controls content">
                     </div>
                     <div class="row_line col-md-6 col-sm-6 col-xs-12">
                         <label>选择环境：</label>
                         <input type="text" class="form-controls identify">
                     </div>
                </div>  
            </div>
        </div>
        <div class="modal-footer text-center">    
           <input type="submit" class="btn btn-default btn_blue" value="保存">
           <button type="button" class="btn btn-default btn_red" data-dismiss="modal">取消</button>
        </div>
      </div>
   </div>
</div>
</form>
<!-- model end -->

js代码如下

说明：当前通过jquery方式获取值，再通过css传值到对话框。

$('#editVoince').on('show.bs.modal', function (event) {
      var btnThis = $(event.relatedTarget); //触发事件的按钮
      var modal = $(this);  //当前模态框
      var modalId = btnThis.data('id');   //解析出data-id的内容
      var content = btnThis.closest('tr').find('td').eq(2).text();
      modal.find('.content').val(content);         
});

效果如下：

另外有需要云服务器可以了解下创新互联cdcxhl.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。

分享名称：bootstrap模态框modal传值问题-创新互联
当前网址：https://www.cdcxhl.com/article36/decesg.html

成都网站建设公司_创新互联，为您提供企业建站、品牌网站建设、软件开发、品牌网站制作、ChatGPT、Google

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联