您的位置：首页 > Web前端 > BootStrap

html5的bootstrap模态框与js之间的值传递

2016-01-04 20:40 555 查看 
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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航