bootstrap 模态框modal 传值问题

后台管理的项目常会使用到bootstrap里面的模态框modal，因此编辑的时候就需要将页面上的值传到模态框里面并显示，如：

html代码：

<table  >      <tr>           <th><input type="checkbox" ></th>          <th>编号</th><th>发票类型</th><th>发票开头</th><th>发票明细</th>          <th>纳税人识别号</th><th>营业电话</th><th>营业地址</th><th>银行</th>          <th>开户地区</th><th>开户支行</th><th>银行账号</th>          <th>操作</th>      </tr>      <tr>          <td><input type="checkbox" ></td>           <td>1</td><td>xxxxx</td><td>啦啦</td><td>11</td>           <td>22</td><td>33</td><td>44</td><td>55</td>           <td>66</td><td>77</td><td>88</td>           <td><a  data-toggle="modal" data-target="#editVoince" data->编辑</a>               <a >删除</a>           </td>      </tr></table>

<!-- model start --><form action="saveSupplier" method="POST"><div   tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">    <div >       <div >          <div >              <button type="button"  data-dismiss="modal" aria-hidden="true">×</button>              <h4 >新增发票信息</h4>          </div>          <div >             <div >                 <div >                      <div >                         <label>发票明细：</label>                         <input type="text" >                     </div>                     <div >                         <label>纳税人识别号：</label>                         <input type="text" >                     </div>                </div>              </div>        </div>        <div >               <input type="submit"  value="保存">           <button type="button"  data-dismiss="modal">取消</button>        </div>      </div>   </div></div></form><!-- model end -->

js代码如下：

$('#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);         });

保存数据时，可以异步请求提交数据或直接form表单提交数据就行了。

界面如图：