如何实现div内容的动态渲染

最新推荐文章于 2023-07-31 10:39:04 发布

山中水蓝

最新推荐文章于 2023-07-31 10:39:04 发布

阅读量2.7k

点赞数

CC 4.0 BY-SA版权

分类专栏： JSP 文章标签： jsp js 动态渲染内容和表格

本文链接：https://blog.youkuaiyun.com/Garnett_zk/article/details/95491096

JSP 专栏收录该内容

18 篇文章

订阅专栏

博客主要介绍div内容动态渲染，包括给div设置id、用js设置div内容，还提及append和html的区别，展示了效果图，并给出ServerTeam.jsp和ServerTeam.js的源码，可用于动态渲染内容和表格。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

div或者table内容的动态渲染

div内容动态渲染

div内容动态渲染

1.给div设置id

<div id="ServerTeam" style="display: inline-block;background-color:#fff;width:80%;height:100%;">

        </div>

2.js设置div的内容

如果给div中添加简单的内容，例如添加welcome，代码如下

$("#ServerTeam").append("Welcome");

复杂页面的代码如下，效果图看4效果图

//启动时执行
$(function(){
	console.log("第一次执行");
	selectServerMeeting();
	var logstatus = $("#status option:selected").val();
	selectlog(logstatus);
})
//查询会议室服务状态
 var selectServerMeeting = function(){
	 console.log("执行");
	$.ajax({
		url:"selectMeetingServer",
		type:"post",
		dataType:"json",
		data:{
			"page":1,
			"count":10
		},
		error: function(){
			console.log("查询出错");
		},
		success:function(data){
			$("#ServerTeam").html('');//清除之前的div中的内容，避免定时器执行时，重复生成append
			var data = data.data;
			for(var p in data){//遍历json对象的每个key/value对,p为key
				 console.log(p);
				 meetingStatus(data[p]);
			}	
		}
	})
}

 
 
//判断会议室显示的状态
var meetingStatus = function(data){
	console.log(11);
	if(data.meetingstatus==3){
		//$("#id").append("内容")表示填充内容，且新填充的内容不会覆盖原来的;$("#id").html("内容")表示填充内容，且新填充的内容会覆盖原来的
		//如果会议室故障，那么显示会议室灰色，表示断开连接
		$("#ServerTeam").append(
			'<div class="metro ipcall-container">'+
		        '<a class="tile square text" style="height:175px;width:210px;background-color: #cdcdcd;" href="#">'+
			        '<div>'+
			            '<div align="left" >'+
			                '<span style="font-size: 20px;">'+data.meetingname+'</span>'+
							'<div style="width:100%; height:2px; border-top:1px solid #fff; clear:both;margin-top:10px;"></div>'+
			            '</div>'+
			        '</div>'+
					'<div style="margin-top:60px;">'+
						'<span style="font-size: 20px;">无服务呼叫</span>'+
					'</div>'+
				'</a>'+
		'</div>');
	}else{
		if(data.status==0){
			$("#ServerTeam").append(
					'<div class="metro ipcall-container">'+
				        '<a class="tile square text" style="height:175px;width:210px;" href="#">'+
					        '<div>'+
					            '<div align="left" >'+
					                '<span style="font-size: 20px;">'+data.meetingname+'</span>'+
									'<div style="width:100%; height:2px; border-top:1px solid #fff; clear:both;margin-top:10px;"></div>'+
					            '</div>'+
					        '</div>'+
							'<div style="margin-top:60px;">'+
								'<span style="font-size: 20px;">无服务呼叫</span>'+
							'</div>'+
						'</a>'+
				'</div>');
		}else if(data.status==1){
			$("#ServerTeam").append(
			'<div class="metro ipcall-container">'+
	            '<a class="tile square text" style="height:175px;width:210px;background-color:#1CAFB5" href="#">'+
	            '<div>'+
	                '<div align="left" >'+
	                    '<span style="font-size: 20px;">'+data.meetingname+'</span>'+
						'<div style="width:100%; height:2px; border-top:1px solid #fff; clear:both;margin-top:10px;"></div>'+
	                '</div>'+
	            '</div>'+
				'<div style="height:75px;">'+
					'<div style="display: inline-block;float:left;">'+
						'<div style="display: inline-block;width:30%;">'+
							'<img class="tempimge" src="content/images/ServerTea.png" >'+
						'</div>'+
						'<div style="display: inline-block;width:60%;padding-top:15px;padding-left:15px;">'+
							'<div style="font-size: 20px;" class="text-header">茶水呼叫服务</div>'+
							'<div class="text">2019-06-28 08:00</div>'+
						'</div>'+
					'</div>'+
				'</div>'+
	            '<p style="position: absolute;bottom:5px;left:70px;">'+
	            	'<button class="btn btn-info" type="button"'+'onclick="updateServerLog(\''+data.meetingserverip+'\')"'+'style="background-color:#61E65B;width:100px;">&nbsp;完成</button>'+
	            '</p>'+
	        '</a>'+
		'</div>')
			
		}else if(data.status==2){
			$("#ServerTeam").append(
					'<div class="metro ipcall-container">'+
			            '<a class="tile square text" style="height:175px;width:210px;background-color:#1CAFB5" href="#">'+
			            '<div>'+
			                '<div align="left" >'+
			                    '<span style="font-size: 20px;">'+data.meetingname+'</span>'+
								'<div style="width:100%; height:2px; border-top:1px solid #fff; clear:both;margin-top:10px;"></div>'+
			                '</div>'+
			            '</div>'+
						'<div style="height:75px;">'+
							'<div style="display: inline-block;float:left;">'+
								'<div style="display: inline-block;width:30%;">'+
									'<img class="tempimge" src="content/images/ServerPen.png" >'+
								'</div>'+
								'<div style="display: inline-block;width:60%;padding-top:15px;padding-left:15px;">'+
									'<div style="font-size: 20px;" class="text-header">纸笔呼叫服务</div>'+
									'<div class="text">2019-06-28 08:00</div>'+
								'</div>'+
							'</div>'+
						'</div>'+
			            '<p style="position: absolute;bottom:5px;left:70px;">'+
			                '<button class="btn btn-info" type="button"'+'onclick="updateServerLog(\''+data.meetingserverip+'\')"'+'style="background-color:#61E65B;width:100px;">&nbsp;完成</button>'+
			            '</p>'+
			        '</a>'+
				'</div>')
		}else {
			$("#ServerTeam").append(
					'<div class="metro ipcall-container">'+
			            '<a class="tile square text" style="height:175px;width:210px;background-color:#1CAFB5" href="#">'+
			            '<div>'+
			                '<div align="left" >'+
			                    '<span style="font-size: 20px;">'+data.meetingname+'</span>'+
								'<div style="width:100%; height:2px; border-top:1px solid #fff; clear:both;margin-top:10px;"></div>'+
			                '</div>'+
			            '</div>'+
						'<div style="height:75px;">'+
							'<div style="display: inline-block;float:left;">'+
								'<div style="display: inline-block;width:30%;">'+
									'<img class="tempimge" src="content/images/ServerRepair.png" >'+
								'</div>'+
								'<div style="display: inline-block;width:60%;padding-top:15px;padding-left:15px;">'+
									'<div style="font-size: 20px;" class="text-header">维修呼叫服务</div>'+
									'<div class="text">2019-06-28 08:00</div>'+
								'</div>'+
							'</div>'+
						'</div>'+
			            '<p style="position: absolute;bottom:5px;left:70px;">'+
			            	'<button class="btn btn-info" type="button"'+'onclick="updateServerLog(\''+data.meetingserverip+'\')"'+'style="background-color:#61E65B;width:100px;">&nbsp;完成</button>'+
			            '</p>'+
			        '</a>'+
				'</div>')
		}
		
	}
	
}

3.append和html的区别

$("#ServerTeam").append("Welcome");
$("#ServerTeam").html("Welcome");
//上述两种在不需要重复执行的时候效果是一样的，但是当需要重复的时候，只能用append。
//因为循环的时候,html只是在原先位置不断地覆盖，append则会不断地在上一个后面添加一个新的，所以批量渲染内容的时候最好用append

4.效果图

在这里插入图片描述
上述用红色方块标记的两处位置都是通过查询结果动态渲染出来的

5.ServerTeam.jsp源码

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Pragma" content="no-cache" />
    <meta http-equiv="Cache-Control" content="no-cache" />
    <meta http-equiv="Expires" content="0" />
    <meta name="renderer" content="webkit" />
    <meta name="force-rendering" content="webkit" />
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
    <link rel="stylesheet" href="content/bootmetro/dist/assets/css/bootmetro.css" media="all">
    <link rel="stylesheet" href="content/bootmetro/dist/assets/css/bootmetro-icons.css" media="all">
    <link rel="stylesheet" href="content/bootmetro/dist/assets/css/bootmetro-responsive.css" media="all">
    <link rel="stylesheet" href="content/bootmetro/dist/assets/css/bootmetro-ui-light.css" media="all">
    <script type="text/javascript" src="content/jquery/jquery.min.js"></script>
    <script type="text/javascript" src="content/bootmetro/dist/assets/js/min/bootstrap.min.js"></script>
    <script type="text/javascript" src="content/bootmetro/dist/assets/js/min/bootmetro-icons-ie7.min.js"></script>
    <script type="text/javascript" src="content/bootmetro/dist/assets/js/min/bootmetro-charms.min.js"></script>
    <script type="text/javascript" src="content/bootmetro/dist/assets/js/min/bootmetro-panorama.min.js"></script>
    <script type="text/javascript" src="content/bootmetro/dist/assets/js/min/bootmetro-pivot.min.js"></script>
    <script type="text/javascript" src="content/bootmetro/dist/assets/js/min/bootmetro.min.js"></script>
    <script type="text/javascript" src="content/js/ServerTeam.js"></script>
</head>
<style>
    html {
        height: 100%;
        width: 100%;
        min-width: 1680px;
    }

    body {
        height: 100%;
        width: 100%;
    }

    .ipcall-container {
        width: 17%;
        display: inline-block;
        text-align: center;
        padding-left: 15px;
        padding-top: 15px;
    }
	.tempimge{
		margin-top:-35px;
		height:54px;
		width:70px;
		
	}
</style>

<body>
    <div style="padding-left: 15px;background-color:#448aca;color:white;min-height:98px;height:9.69%;">
        <div id="nav-bar">
            <div class="row">
                <div class="span9">
                    <div style="display: inline-block;">
                        <img src="content/images/ServerHelp.png" width="54" height="54" alt="">
                    </div>

                    <div id="header-container">

                        <div class="dropdown">
                            <a class="header-dropdown" style="color:white;" href="#">
                                呼叫服务
                            </a>
                        </div>
                        <h5>Avtronsys会议中心管理平台</h5>
                    </div>
                    
                </div>
            </div>
        </div>
    </div>
    <div style="height:89.11%;">
        <div id="ServerTeam" style="display: inline-block;background-color:#fff;width:80%;height:100%;">

            <!-- <div class="metro ipcall-container">
                <a class="tile square text" style="height:175px;width:210px;background-color:#1CAFB5" href="#">
                    <div>
                        <div align="left" >
                            <span style="font-size: 20px;">培训室</span>
							设置下划线
							<div style="width:100%; height:2px; border-top:1px solid #fff; clear:both;margin-top:10px;"></div>
                        </div>
						
						
                    </div>
					<div style="height:75px;">
						<div style="display: inline-block;float:left;">
							<div style="display: inline-block;width:30%;">
								<img class="tempimge" src="content/images/ServerPen.png" >
							</div>
							<div style="display: inline-block;width:60%;padding-top:15px;padding-left:15px;">
								<div style="font-size: 20px;" class="text-header">纸笔呼叫服务</div>
								<div class="text">2019-06-28 08:00</div>
							</div>
							
						</div>
					</div>
                    <p style="position: absolute;bottom:5px;left:70px;">
                        <button class="btn btn-info" type="button" style="background-color:#61E65B;width:100px;">&nbsp;完成</button>
                    </p>
                </a>
            </div> -->
			<!-- <div class="metro ipcall-container">
                <a class="tile square text" style="height:175px;width:210px;background-color:#1CAFB5" href="#">
                    <div>
                        <div align="left" >
                            <span style="font-size: 20px;">101会议室</span>
							设置下划线
							<div style="width:100%; height:2px; border-top:1px solid #fff; clear:both;margin-top:10px;"></div>
                        </div>
                    </div>
					<div style="height:75px;">
						<div style="display: inline-block;float:left;">
							<div style="display: inline-block;width:30%;">
								<img class="tempimge" src="content/images/ServerTea.png" >
							</div>
							<div style="display: inline-block;width:60%;padding-top:15px;padding-left:15px;">
								<div style="font-size: 20px;" class="text-header">茶水呼叫服务</div>
								<div class="text">2019-06-28 11:00</div>
							</div>
							
						</div>
					</div>
                    <p style="position: absolute;bottom:5px;left:70px;">
                        <button class="btn btn-info" type="button" style="background-color:#61E65B;width:100px;">&nbsp;完成</button>
                    </p>
                </a>
            </div>
			<div class="metro ipcall-container">
                <a class="tile square text" style="height:175px;width:210px;background-color:#1CAFB5" href="#">
                    <div>
                        <div align="left" >
                            <span style="font-size: 20px;">102会议室</span>
							设置下划线
							<div style="width:100%; height:2px; border-top:1px solid #fff; clear:both;margin-top:10px;"></div>
                        </div>
                    </div>
					<div style="height:75px;">
						<div style="display: inline-block;float:left;">
							<div style="display: inline-block;width:30%;">
								<img class="tempimge" src="content/images/ServerRepair.png" >
							</div>
							<div style="display: inline-block;width:60%;padding-top:15px;padding-left:15px;">
								<div style="font-size: 20px;" class="text-header">维修呼叫服务</div>
								<div class="text">2019-06-28 09:00</div>
							</div>
						</div>
					</div>
                    <p style="position: absolute;bottom:5px;left:70px;">
                        <button class="btn btn-info" type="button" style="background-color:#61E65B;width:100px;">&nbsp;完成</button>
                    </p>
                </a>
            </div>
			
			<div class="metro ipcall-container">
                <a class="tile square text" style="height:175px;width:210px;" href="#">
                    <div>
                        <div align="left" >
                            <span style="font-size: 20px;">103会议室</span>
							设置下划线
							<div style="width:100%; height:2px; border-top:1px solid #fff; clear:both;margin-top:10px;"></div>
                        </div>
                    </div>
					<div style="margin-top:60px;">
						<span style="font-size: 20px;">无服务呼叫</span>
					</div>
                </a>
            </div>
           <div class="metro ipcall-container">
                <a class="tile square text" style="height:175px;width:210px;" href="#">
                    <div>
                        <div align="left" >
                            <span style="font-size: 20px;">104会议室</span>
							设置下划线
							<div style="width:100%; height:2px; border-top:1px solid #fff; clear:both;margin-top:10px;"></div>
                        </div>
                    </div>
					<div style="margin-top:60px;">
						<span style="font-size: 20px;">无服务呼叫</span>
					</div>
                </a>
            </div>
            <div class="metro ipcall-container">
                <a class="tile square text" style="height:175px;width:210px;" href="#">
                    <div>
                        <div align="left" >
                            <span style="font-size: 20px;">105会议室</span>
							设置下划线
							<div style="width:100%; height:2px; border-top:1px solid #fff; clear:both;margin-top:10px;"></div>
                        </div>
                    </div>
					<div style="margin-top:60px;">
						<span style="font-size: 20px;">无服务呼叫</span>
					</div>
                </a>
            </div>
			<div class="metro ipcall-container">
                <a class="tile square text" style="height:175px;width:210px;background-color: #cdcdcd;" href="#">
                    <div>
                        <div align="left" >
                            <span style="font-size: 20px;">106会议室</span>
							设置下划线
							<div style="width:100%; height:2px; border-top:1px solid #fff; clear:both;margin-top:10px;"></div>
                        </div>
                    </div>
					<div style="margin-top:60px;">
						<span style="font-size: 20px;">无服务呼叫</span>
					</div>
                </a>
            </div>
			<div class="metro ipcall-container">
                <a class="tile square text" style="height:175px;width:210px;background-color: #cdcdcd;" href="#">
                    <div>
                        <div align="left" >
                            <span style="font-size: 20px;">107会议室</span>
							设置下划线
							<div style="width:100%; height:2px; border-top:1px solid #fff; clear:both;margin-top:10px;"></div>
                        </div>
                    </div>
					<div style="margin-top:60px;">
						<span style="font-size: 20px;">无服务呼叫</span>
					</div>
                </a>
            </div> -->
            
            
        </div>
        <div style="float:right;background-color:#3274b1;width:18%;height:98%;padding:1%;">
            <h2 style="color:#fff;">通话历史记录</h2>
            <div style="margin-top:30px;">
                <select id ="status" onchange="checkSelect();" style="width:90%;" >
                    <option value=10>全部</option>
                    <option value=0>未完成</option>
                </select>
            </div>
            <div>
                    <table class="table" style="color:#fff;">
                            <thead>
                            <tr>
                               <th>&nbsp;</th>
                               <th>&nbsp;</th>
                            </tr>
                            </thead>
                            <tbody id ="tbody">
                            <!-- <tr style="color:#ff0000;">
                               <td style="font-size:20px;"><b>101会议室</b></td>
                              
							   <td style="font-size:20px;"><b>未完成</b></td>
                            </tr>
							<tr style="border-bottom:1px solid #fff">
                                    <td style="font-size:2px;">2019-06-11 19:00</td>
									<td></td>
                            
                            </tr>
							<tr >
                               <td style="font-size:20px;"><b>103会议室</b></td>
                              
							   <td style="font-size:20px;"><b>完成</b></td>
                            </tr>
							<tr style="border-bottom:1px solid #fff">
                                    <td style="font-size:2px;">2019-06-11 16:00</td>
									<td></td>
                            
                            </tr>
							<tr >
                               <td style="font-size:20px;"><b>104会议室</b></td>
                              
							   <td style="font-size:20px;"><b>完成</b></td>
                            </tr>
							<tr style="border-bottom:1px solid #fff">
                                    <td style="font-size:2px;">2019-06-11 12:00</td>
									<td></td>
                            
                            </tr>
							<tr >
                               <td style="font-size:20px;"><b>102会议室</b></td>
                              
							   <td style="font-size:20px;"><b>完成</b></td>
                            </tr>
							<tr style="border-bottom:1px solid #fff">
                                    <td style="font-size:2px;">2019-06-11 14:00</td>
									<td></td>
                            
                            </tr> -->
							
							
                            <!-- <tr style="color:#ff0000;border-bottom:1px solid #fff;">
                                    <td>101会议管理中心</td>
                                    <td>2019-06-11 19:46</td>
									<td>未完成</td>
                            </tr>
                            <tr style="border-bottom:1px solid #fff;">
                                    <td>102会议室</td>
                                    <td>2019-06-11 11:46</td>
									<td>完成</td>
                            </tr>
                            <tr style="border-bottom:1px solid #fff">
                                    <td>103会议室</td>
                                    <td>2019-06-11 13:46</td>
									<td>完成</td>
                            </tr>
							<tr style="border-bottom:1px solid #fff;">
                                    <td>101会议室</td>
                                    <td>2019-06-11 15:46</td>
									<td>完成</td>
                            </tr> -->
							
							<!-- <tr style="color:#ff0000">
                                    <td>101会议管理中心</td>
                                    <td>2019-06-11 19:46</td>
									
                            </tr>
                            <tr >
                                    <td>102会议室</td>
                                    <td>2019-06-11 11:46</td>
									
                            </tr>
                            <tr >
                                    <td>103会议室</td>
                                    <td>2019-06-11 13:46</td>
									
                            </tr>
							<tr >
                                    <td>101会议室</td>
                                    <td>2019-06-11 15:46</td>
									
                            </tr> -->
                            </tbody>
                         </table>
            </div>
        </div>

    </div>
</body>

</html>

6.ServerTeam.js源码



$(function(){
	console.log("第一次执行");
	selectServerMeeting();
	var logstatus = $("#status option:selected").val();
	selectlog(logstatus);
})




//查询会议室服务状态
 var selectServerMeeting = function(){
	 console.log("执行");
	$.ajax({
		url:"selectMeetingServer",
		type:"post",
		dataType:"json",
		data:{
			"page":1,
			"count":10
		},
		error: function(){
			console.log("查询出错");
		},
		success:function(data){
			$("#ServerTeam").html('');//清除之前的div中的内容，避免定时器执行时，重复生成append
			var data = data.data;
			for(var p in data){//遍历json对象的每个key/value对,p为key
				 console.log(p);
				 meetingStatus(data[p]);
			}	
		}
	})
}

 
 
//判断会议室显示的状态
var meetingStatus = function(data){
	console.log(11);
	if(data.meetingstatus==3){
		//$("#id").append("内容")表示填充内容，且新填充的内容不会覆盖原来的;$("#id").html("内容")表示填充内容，且新填充的内容会覆盖原来的
		//如果会议室故障，那么显示会议室灰色，表示断开连接
		$("#ServerTeam").append(
			'<div class="metro ipcall-container">'+
		        '<a class="tile square text" style="height:175px;width:210px;background-color: #cdcdcd;" href="#">'+
			        '<div>'+
			            '<div align="left" >'+
			                '<span style="font-size: 20px;">'+data.meetingname+'</span>'+
							'<div style="width:100%; height:2px; border-top:1px solid #fff; clear:both;margin-top:10px;"></div>'+
			            '</div>'+
			        '</div>'+
					'<div style="margin-top:60px;">'+
						'<span style="font-size: 20px;">无服务呼叫</span>'+
					'</div>'+
				'</a>'+
		'</div>');
	}else{
		if(data.status==0){
			$("#ServerTeam").append(
					'<div class="metro ipcall-container">'+
				        '<a class="tile square text" style="height:175px;width:210px;" href="#">'+
					        '<div>'+
					            '<div align="left" >'+
					                '<span style="font-size: 20px;">'+data.meetingname+'</span>'+
									'<div style="width:100%; height:2px; border-top:1px solid #fff; clear:both;margin-top:10px;"></div>'+
					            '</div>'+
					        '</div>'+
							'<div style="margin-top:60px;">'+
								'<span style="font-size: 20px;">无服务呼叫</span>'+
							'</div>'+
						'</a>'+
				'</div>');
		}else if(data.status==1){
			$("#ServerTeam").append(
			'<div class="metro ipcall-container">'+
	            '<a class="tile square text" style="height:175px;width:210px;background-color:#1CAFB5" href="#">'+
	            '<div>'+
	                '<div align="left" >'+
	                    '<span style="font-size: 20px;">'+data.meetingname+'</span>'+
						'<div style="width:100%; height:2px; border-top:1px solid #fff; clear:both;margin-top:10px;"></div>'+
	                '</div>'+
	            '</div>'+
				'<div style="height:75px;">'+
					'<div style="display: inline-block;float:left;">'+
						'<div style="display: inline-block;width:30%;">'+
							'<img class="tempimge" src="content/images/ServerTea.png" >'+
						'</div>'+
						'<div style="display: inline-block;width:60%;padding-top:15px;padding-left:15px;">'+
							'<div style="font-size: 20px;" class="text-header">茶水呼叫服务</div>'+
							'<div class="text">2019-06-28 08:00</div>'+
						'</div>'+
					'</div>'+
				'</div>'+
	            '<p style="position: absolute;bottom:5px;left:70px;">'+
	            	'<button class="btn btn-info" type="button"'+'onclick="updateServerLog(\''+data.meetingserverip+'\')"'+'style="background-color:#61E65B;width:100px;">&nbsp;完成</button>'+
	            '</p>'+
	        '</a>'+
		'</div>')
			
		}else if(data.status==2){
			$("#ServerTeam").append(
					'<div class="metro ipcall-container">'+
			            '<a class="tile square text" style="height:175px;width:210px;background-color:#1CAFB5" href="#">'+
			            '<div>'+
			                '<div align="left" >'+
			                    '<span style="font-size: 20px;">'+data.meetingname+'</span>'+
								'<div style="width:100%; height:2px; border-top:1px solid #fff; clear:both;margin-top:10px;"></div>'+
			                '</div>'+
			            '</div>'+
						'<div style="height:75px;">'+
							'<div style="display: inline-block;float:left;">'+
								'<div style="display: inline-block;width:30%;">'+
									'<img class="tempimge" src="content/images/ServerPen.png" >'+
								'</div>'+
								'<div style="display: inline-block;width:60%;padding-top:15px;padding-left:15px;">'+
									'<div style="font-size: 20px;" class="text-header">纸笔呼叫服务</div>'+
									'<div class="text">2019-06-28 08:00</div>'+
								'</div>'+
							'</div>'+
						'</div>'+
			            '<p style="position: absolute;bottom:5px;left:70px;">'+
			                '<button class="btn btn-info" type="button"'+'onclick="updateServerLog(\''+data.meetingserverip+'\')"'+'style="background-color:#61E65B;width:100px;">&nbsp;完成</button>'+
			            '</p>'+
			        '</a>'+
				'</div>')
		}else {
			$("#ServerTeam").append(
					'<div class="metro ipcall-container">'+
			            '<a class="tile square text" style="height:175px;width:210px;background-color:#1CAFB5" href="#">'+
			            '<div>'+
			                '<div align="left" >'+
			                    '<span style="font-size: 20px;">'+data.meetingname+'</span>'+
								'<div style="width:100%; height:2px; border-top:1px solid #fff; clear:both;margin-top:10px;"></div>'+
			                '</div>'+
			            '</div>'+
						'<div style="height:75px;">'+
							'<div style="display: inline-block;float:left;">'+
								'<div style="display: inline-block;width:30%;">'+
									'<img class="tempimge" src="content/images/ServerRepair.png" >'+
								'</div>'+
								'<div style="display: inline-block;width:60%;padding-top:15px;padding-left:15px;">'+
									'<div style="font-size: 20px;" class="text-header">维修呼叫服务</div>'+
									'<div class="text">2019-06-28 08:00</div>'+
								'</div>'+
							'</div>'+
						'</div>'+
			            '<p style="position: absolute;bottom:5px;left:70px;">'+
			            	'<button class="btn btn-info" type="button"'+'onclick="updateServerLog(\''+data.meetingserverip+'\')"'+'style="background-color:#61E65B;width:100px;">&nbsp;完成</button>'+
			            '</p>'+
			        '</a>'+
				'</div>')
		}
		
	}
	
}

//点击完成按钮，实现对所有会议室的重新渲染
var updateServerLog = function(data){
	$.ajax({
		url:"finishServerStatus",
		type:"post",
		dataType:"json",
		data:{
			"IP":data,
			"serverstatus":0
		},
		error: function(){
			console.log("查询出错");
		},
		success:function(data){
			selectServerMeeting();
			var logstatus = $("#status option:selected").val();
			selectlog(logstatus);
		}
	})
}

var selectlog = function(data){
	$.ajax({
		url:"selectServerLogPage",
		type:"post",
		dataType:"json",
		data:{
			"logstatus":data,
			"begin":0,
			"end":20
		},
		error: function(){
			console.log("查询出错");
		},
		success:function(data){
			//在table的body部分重写
			console.log("测试");
			var data = data.data;
			$("#tbody").html('');//清除之前的tbody中的内容，避免定时器执行时，重复生成append
			for (var i = 0; i < data.length; i++) {
				displaylog(data[i]);
			}
			
		}
	})
}

var displaylog = function(data){
	if(data.logstatus == 0){
		$("#tbody").append(
			'<tr style="color:#ff0000">'+
				'<td>'+data.meetingname+'</td>'+
				'<td>'+datetimeFormat(data.timelog)+'</td>'+
			'</tr>');
	}else{
		$("#tbody").append(
				'<tr >'+
					'<td>'+data.meetingname+'</td>'+
					'<td>'+datetimeFormat(data.timelog)+'</td>'+
				'</tr>');
	}
}

var firstdone = function(){
	selectServerMeeting();
	var logstatus = $("#status option:selected").val();
	selectlog(logstatus);
}
window.setInterval("firstdone()",15000);

/*$("#status").change(function(){
	var logstatus = $("#status option:selected").val();
	console.log("触发反应");
	selectlog(logstatus);
});*/

var checkSelect = function(){
	var logstatus = $("#status option:selected").val();
	selectlog(logstatus);
}

 var datetimeFormat= function (longTypeDate){  
	 var dateTypeDate = "";  
	 var date = new Date();  
	 date.setTime(longTypeDate);  
	 dateTypeDate += date.getFullYear(); //年  
	 dateTypeDate += "-" + getMonth(date); //月  
	 dateTypeDate += "-" + getDay(date); //日  
	 dateTypeDate += " " + getHours(date); //时  
	 dateTypeDate += ":" + getMinutes(date);  //分 
	 dateTypeDate += ":" + getSeconds(date);  //分 
	 return dateTypeDate; 
	}
 
 
//返回 01-12 的月份值  
 function getMonth(date){  
  var month = "";  
  month = date.getMonth() + 1; //getMonth()得到的月份是0-11  
  if(month<10){  
   month = "0" + month;  
  }  
  return month;  
 }  
 //返回01-30的日期  
 function getDay(date){  
  var day = "";  
  day = date.getDate();  
  if(day<10){  
   day = "0" + day;  
  }  
  return day;  
 } 
 //小时 
 function getHours(date){ 
  var hours = ""; 
  hours = date.getHours(); 
  if(hours<10){  
   hours = "0" + hours;  
  }  
  return hours;  
 } 
 //分 
 function getMinutes(date){ 
  var minute = ""; 
  minute = date.getMinutes(); 
  if(minute<10){  
   minute = "0" + minute;  
  }  
  return minute;  
 } 
 //秒 
 function getSeconds(date){ 
  var second = ""; 
  second = date.getSeconds(); 
  if(second<10){  
   second = "0" + second;  
  }  
  return second;  
 }