<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link href="css/bootstrap.min.css" rel="stylesheet" />
<link rel="stylesheet" href="css/font-awesome.min.css" />
<style>
li {
list-style: none;
}
.modal-li li {
height: 45px;
line-height: 45px;
}
.text-input {
display: inline-block;
width: 80%;
margin-left: 10px;
}
</style>
</head>
<body>
<!--主页面数据 start-->
<div style="margin:50px;">
<table class="table table-bordered">
<thead>
<tr>
<th>姓名</th>
<th>编号</th>
<th>性别</th>
<th>修改</th>
</tr>
</thead>
<tbody>
<tr>
<td>龙彻</td>
<td>20160621</td>
<td>男</td>
<td style="color:#f00;cursor:pointer;" onclick="editInfo(this)">修改</td>
</tr>
<tr>
<td>Sachin</td>
<td>20160621111</td>
<td>女</td>
<td style="color:#f00;cursor:pointer;" onclick="editInfo(this)">修改</td>
</tr>
<tr>
<td>Uma</td>
<td>23341</td>
<td>男</td>
<td style="color:#f00;cursor:pointer;" onclick="editInfo(this)">修改</td>
</tr>
</tbody>
</table>
</div>
<!--主页面数据 start-->
<!--模态窗口 -->
<div class="modal fade" id="modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title" id="myModalLabel">模态窗口</h4>
</div>
<div class="modal-body modal-li">
<form>
<ul>
<li>
<label for="name">姓名</label>
<input type="text" class="form-control text-input" id="name" placeholder="请输入姓名">
</li>
<li>
<label for="name">编号</label>
<input type="text" class="form-control text-input" id="number" placeholder="请输入编号">
</li>
<li>
<label for="name">性别</label>
<input type="radio" name="sex" id="man" value="男" style="margin-left:10px;"/>男
<input type="radio" name="sex" id="women" value="女" style="margin-left:10px;"/>女
</li>
</ul>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
<button type="button" class="btn btn-primary" onclick="update()">保存</button>
</div>
</div>
</div>
</div>
<!--end-模态窗口 -->
<script src='js/jquery-1.10.2.min.js'></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
js:
//触发模态框的同时调用此方法
function editInfo(obj) {
var tds= $(obj).parent().find('td');
$('#name').val(tds.eq(0).text());
$('#number').val(tds.eq(1).text());
var sex = $('#sex').val(tds.eq(2).text());
if (sex == '女') {
document.getElementById('women').checked = true;
} else {
document.getElementById('man').checked = true;
}
$('#modal').modal('show');
}
//提交更改
function update() {
//获取模态框数据
var name = $('#name').val();
var number = $('#number').val();
var sex = $('input:radio[name="sex"]:checked').val();
$.ajax({
type: "post",
url: "",
data: "name=" + name + "&number=" + number + "&sex=" + sex,
dataType: 'html',
contentType: "application/x-www-form-urlencoded; charset=utf-8",
success: function(result) {
//location.reload();
}
});
$('#modal').modal('hide');
}