<div id="modal-table" class="modal fade" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header no-padding">
<button type="button" class="close" data-dismiss="modal"
aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<div class="table-header">
成绩详情
</div>
</div>
<div class="modal-body no-padding">
<table class="table table-striped table-bordered table-hover no-margin-bottom no-border-top" id="modal-table-table">
<thead>
<tr>
<th>课程名称</th>
<th>课程性质</th>
<th>学分</th>
<th>绩点</th>
<th>成绩</th>
<th class="center">
是否通过
</th>
</tr>
</thead>
<tbody id="modal-table-body">
</tbody>
</table>
</div>
<div class="modal-footer no-margin-top">
<button class="btn btn-sm btn-danger pull-left" data-dismiss="modal">
<i class="ace-icon fa fa-times"></i> Close
</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div>
模态框内容
下面是前端页面中触发模态框的地方
<td class="center">
<div class="action-buttons">
<i value="${studentScore.stName}" class="ace-icon fa fa-angle-double-down scoreDetails" ></i>
</div>
</td>
/* 显示成绩详情 */
$(".scoreDetails").click(function() {
var scStudentName =$(this).attr("value");
$.ajax({
type:"post", #这里不能只能用load(url,data),具体见另一篇文章,关于load(),post和get方法刷新页面的区别
url:"studentScore/findScoreByScStudentName",
dataType: "json",
data: {
"scStudentName": scStudentName
},
success:function(data){
var table = document.getElementById("modal-table-table");
var t_body = document.getElementById("modal-table-body");
for(var i = 0;i<data.length;i++){
/* alert(data.size()) 取不到data[i]
//将null转化为""
for(attr in data[i]) {
if(data[i][attr] === null) {
data[i][attr] = "";
}
}
*/
var tr_score = document.createElement("tr");
var td_scCourseName = document.createElement("td");
var td_scCourseNature = document.createElement("td");
var td_scCourseCredit = document.createElement("td");
var td_scGpa = document.createElement("td");
var td_scScore = document.createElement("td");
var td_pass = document.createElement("td");
td_scCourseName.innerHTML =data[i].scCourseName;
td_scCourseNature.innerHTML = data[i].scCourseNature;
td_scCourseCredit.innerHTML = data[i].scCourseCredit;
td_scGpa.innerHTML = data[i].scGpa;
td_scScore.innerHTML = data[i].scScore;
if(data[i].scGpa>1.0)
td_pass.innerHTML="<i class='ace-icon fa fa-check green bigger-130'></i>"
else
td_pass.innerHTML="<i class='ace-icon fa fa-times red2 bigger-130'></i>"
tr_score.appendChild(td_scCourseName);
tr_score.appendChild(td_scCourseNature);
tr_score.appendChild(td_scCourseCredit);
tr_score.appendChild(td_scGpa);
tr_score.appendChild(td_scScore);
tr_score.appendChild(td_pass);
t_body.appendChild(tr_score);
}
table.appendChild(t_body);
},
error:function(err){
alert("发生错误");
}
});
$('#modal-table').modal("show");
});