html5的bootstrap模態框與js之間的值傳遞
阿新 • • 發佈：2019-02-03
1. <!DOCTYPE html>2. <html>3. <head>4. <meta charset="utf-8"> <!-- 最新 Bootstrap 核心 CSS 檔案 --> <link rel="stylesheet" href="http://cdn.bootcss.com/twitter-bootstrap/3.0.3/css/bootstrap.min.css"> <!-- 可選的Bootstrap主題檔案（一般不用引入） --> <link rel="stylesheet" href="http://cdn.bootcss.com/twitter-bootstrap/3.0.3/css/bootstrap-theme.min.css"> </head> <body> <div class="d_table" id="d_table"> <table class="table table-hover table-striped table-bordered"> <thead> <tr> <th>姓名</th> <th>性別</th> <th>手機號碼</th> <th>郵箱</th> <th>操作</th> </tr> </thead> <tbody id="tbody"> <c:forEach items="${personList.datas}" var="person"> <tr id="aa"> <td>oseye</td> <td>女</td> <td>${person.personPhone}</td> <td>${person.personMail}</td> <td><a href="javascript:void(0)" onclick="update(this);">修改</a> | <a href="javascript:del('${person.id}')">刪除</a></td> </tr> </c:forEach> </tbody> </table> </div> <div class="modal fade" id="update" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <form id="saveDeviceForm" action="saveDevice" method="post"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">×</button> <h3>修改</h3> </div> <div class="modal-body"> <ul> <li><span>姓名:</span> <input id="name" type="text" name="personName" /> </li> <li><span>性別：</span> <input id="p_man" type="radio" name="personSex" value="男" /> <label for="p_man">男</label> <input id="p_woman" type="radio" name="personSex" value="女" /> <label for="p_woman">女</label> </li> <li><span>手機號碼：</span> <input id="phone" type="text" maxlength="11" name="personPhone" /><span class="errorMeg" id="errorPhone"></span></li> <li><span>郵箱：</span> <input type="text" name="personMail" id="email" onblur="checkEmail()" /><span class="errorMeg" id="errorEmail"></span></li> <li><span>地址：</span> <input type="text" name="personAddress" /> </li> </ul> </div> <div class="modal-footer"> <a class="button" data-dismiss="modal" aria-hidden="true">取消</a><a class="button" onclick="submitOK()">確定</a> </div> </form> </div> </div> </div> </body> </html> <!-- jQuery檔案。務必在bootstrap.min.js 之前引入 --> <script src="http://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script> <!-- 最新的 Bootstrap 核心 JavaScript 檔案 --> <script src="http://cdn.bootcss.com/twitter-bootstrap/3.0.3/js/bootstrap.min.js"></script> <script> function update(obj) { var tds = $(obj).parent().parent().find('td'); $('#name').val(tds.eq(0).text()); //This is new code for the radio.75. if (tds.eq(1).text() == '男') { $('#p_man').attr("checked", "checked"); } else { $('#p_woman').attr("checked", "checked"); } $('#update').modal('show'); } </script>