bootstrap里的模态框动态取值赋值

最新推荐文章于 2023-03-16 19:29:34 发布

王木木同学

最新推荐文章于 2023-03-16 19:29:34 发布

阅读量1.3k

点赞数

分类专栏：毕设

本文链接：https://blog.csdn.net/qq_39487875/article/details/104961140

版权

毕设专栏收录该内容

12 篇文章 0 订阅

订阅专栏

<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">&times;</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");
				});