Boostrap模态框，以及通过jquery绑定td的值，使模态框回显

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

做页面不管是登录或是修改信息，难免会使用到模态框，在此分享一个比较漂亮的模态框 Boostrap模态框

使用之前首先导入jquery-3.2.1.min.js，和bootstrap.min.js

先添加个触发标记： data-toggle="modal" data-target="#myModal"；

如下所示：

<a title="编辑" href="javascript:;" id="${cust.getC_id()}" data-toggle="modal" data-target="#myModal" onclick="edit_customer(this)" class="ml-5" style="text-decoration:none"><i class="Hui-iconfont"></i></a>${cust.getC_id()}&nbsp&nbsp

模态框之所以能调用出来是根据模态框代码的id="myModal"识别的：

模态框代码如下：

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content" style="width:450px;position:absolute;border-radius:5px;border:1px solid #000;">
<div class="modal-header" style="height:40px">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h1 class="modal-title" id="myModalLabel" style="font-size:25px;" >信息编辑</h1>
</div>
<div class="modal-body" > <form class="form-horizontal" id="clean_form">

<div class="form-group">
<label for="edit_teamName" style="font-size:16px;font-family:微软雅黑；">&nbsp&nbsp客户姓名</label>
<input type="text" id="edit_name" disabled="disabled" name="ename" style="width:300px;height:30px;margin-left:20px;border-radius:5px;border:1px solid #000;">
</div>
<br><br/> <div class="form-group">
<label for="edit_time" style="font-size:16px;font-family:微软雅黑；">&nbsp&nbsp性&nbsp&nbsp&nbsp别&nbsp&nbsp&nbsp</label>
<input type="text" id="edit_sex" value="" placeholder=" 性别" name="esex" style="width:300px;height:31px;margin-left:23px;border-radius:5px;border:1px solid #000;">
</div>
<br/><br/> <div class="form-group">
<label for="edit_reson" style="font-size:16px;font-family:微软雅黑；">&nbsp&nbsp手机号</label>
&nbsp&nbsp&nbsp<input type="text" id="edit_tel" placeholder=" 手机号" name="etel" style="width:300px;height:30px;margin-left:23px;border-radius:5px;border:1px solid #000;">
</div>
<br/><br/> <div class="form-group" style="line-height:5px" >
<label for="edit_teamId" id="teamId" style="font-size:16px;font-family:微软雅黑；">&nbsp&nbsp邮&nbsp&nbsp&nbsp箱</label>
&nbsp&nbsp&nbsp<input type="text" id="edit_email" placeholder=" 邮箱" name="eemail" style="width:300px;height:30px;margin-left:25px;border-radius:5px;border:1px solid #000;">
</div>
<br/><br/>
<div class="form-group">
<label for="edit_reson" style="font-size:16px;font-family:微软雅黑；">&nbsp&nbsp套餐类型</label>
<input type="text" id="edit_type" placeholder=" 套餐类型" name="etype" style="width:300px;height:30px;margin-left:20px;border-radius:5px;border:1px solid #000;">
</div>
<br/><br/>
<div class="form-group">
<label for="edit_reson" style="font-size:16px;font-family:微软雅黑；">&nbsp&nbsp地&nbsp&nbsp&nbsp址&nbsp&nbsp&nbsp</label>
<input type="text" id="edit_addr" placeholder=" 地址" name="eaddr" style="width:300px;height:30px;margin-left:23px;border-radius:5px;border:1px solid #000;">
</div>
<br/><br/>
<div class="form-group">
<label for="edit_reson" style="font-size:16px;font-family:微软雅黑；">&nbsp&nbsp备&nbsp&nbsp&nbsp注&nbsp&nbsp&nbsp</label>
<input type="text" id="edit_mark" placeholder=" 备注" name="emark" style="width:300px;height:30px;margin-left:23px;border-radius:5px;border:1px solid #000;">
</div>
<br/>
</form>
</div>
<div class="modal-footer" style="border-radius:5px; solid #000;">
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
<button type="button" class="btn btn-primary" onclick="clean_insert()">提交</button>
</div>
</div>
</div>
</div>

模态框回显td中的值：

function edit_customer(obj){
var $td= $(obj).parents('tr').children('td');
var td_name = $td.eq(2).text();
var td_sex = $td.eq(3).text();
var td_tel = $td.eq(4).text();
var td_email = $td.eq(5).text();
var td_combotype = $td.eq(6).text();
var td_addr = $td.eq(8).text();
var td_remark = $td.eq(9).text();

$("#edit_name").val(td_name);
$("#edit_sex").val(td_sex);
$("#edit_tel").val(td_tel);
$("#edit_email").val(td_email);
$("#edit_type").val(td_combotype);
$("#edit_addr").val(td_addr);
$("#edit_mark").val(td_remark);
}