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">&#xe6df;</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">&times;</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">
                    <!-- 輸入框中不可設置disabled="disabled"，後臺接收認爲是默認值，沒法傳參 -->
                    <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);
}