会议室占用情况展示，效果图如上
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<style>
.table_box{ width:800px; height:500px; border:1px solid black; border-left:none; border-bottom:none; }
.table_header{ display:flex; justify-content: center; }
.week{ flex:1; text-align: center; line-height: 70px; border-bottom:1px solid #000; border-left:1px solid black; }
.table_tr{ display: flex; }
.meet{ border-left:1px solid black; border-bottom:1px solid black; width:99px; }
.meetstate{ flex:1;}
.state{ border-left:1px solid black; float:left; border-bottom:1px solid black; background: #eee; color:#eee; border-radius: 10px;}
</style>
<body>
<div class="table_box">
<div class="table_header">
</div>
<div class="table_main">
<!-- <div class="table_tr"> -->
<!-- <div class="meet">某会议室</div> -->
<!-- <div class="meetstate"> -->
<!-- <div class="state">0</div>
<div class="state">0</div>
<div class="state">0</div>
<div class="state">0</div>
<div class="state">0</div>
<div class="state">0</div>
<div class="state">0</div> -->
<!-- </div> -->
<!-- </div> -->
</div>
</div>
</body>
<script src="./js/jquery.min.js"></script>
<script>
//数据是临时编的，三个数字表示三种状态
var week=["","周日","周一","周二","周三","周四","周五","周六"]
var mettingRoom=[
{
"name":"海淀会议室",
"state":{
"Sunday":"1",
"Monday":"0",
"Tuesday":"1",
"Wednesday":"0",
"Thursday":"1",
"Friday":"0",
"Staurday":"0"
}
},{
"name":"通州会议室",
"state":{
"Sunday":"2",
"Monday":"0",
"Tuesday":"2",
"Wednesday":"2",
"Thursday":"0",
"Friday":"2",
"Staurday":"0"
}
},{
"name":"朝阳会议室",
"state":{
"Sunday":"0",
"Monday":"2",
"Tuesday":"0",
"Wednesday":"0",
"Thursday":"2",
"Friday":"0",
"Staurday":"0"
}
},{
"name":"昌平会议室",
"state":{
"Sunday":"1",
"Monday":"1",
"Tuesday":"0",
"Wednesday":"0",
"Thursday":"2",
"Friday":"0",
"Staurday":"0"
}
},{
"name":"西城区会议室",
"state":{
"Sunday":"0",
"Monday":"2",
"Tuesday":"0",
"Wednesday":"1",
"Thursday":"0",
"Friday":"0",
"Staurday":"2"
}
},{
"name":"房山会议室",
"state":{
"Sunday":"0",
"Monday":"0",
"Tuesday":"0",
"Wednesday":"0",
"Thursday":"0",
"Friday":"0",
"Staurday":"0"
}
},{
"name":"东城区会议室",
"state":{
"Sunday":"2",
"Monday":"0",
"Tuesday":"1",
"Wednesday":"0",
"Thursday":"0",
"Friday":"0",
"Staurday":"0"
}
},
]
//渲染表头
for(var i=0; i<week.length; i++){
var odiv=$("<div class='week'></div>")
odiv.html("<span>"+week[i]+"</span>")
$(".table_header").append(odiv)
}
//渲染左侧会议室名称，及状态值
for(var i=0; i<mettingRoom.length; i++){
var odiv0=$("<div class='table_tr'><div class='meet'>"+mettingRoom[i].name+"</div><div class='meetstate'><div class='state'>"+mettingRoom[i].state.Sunday+"</div><div class='state'>"+mettingRoom[i].state.Monday+"</div><div class='state'>"+mettingRoom[i].state.Tuesday+"</div><div class='state'>"+mettingRoom[i].state.Wednesday+"</div><div class='state'>"+mettingRoom[i].state.Thursday+"</div><div class='state'>"+mettingRoom[i].state.Friday+"</div><div class='state'>"+mettingRoom[i].state.Staurday+"</div></div></div>")
$(".table_main").append(odiv0)
}
//根据状态值改变颜色
for(var i=0;i<$(".state").length;i++){
if($(".state").eq(i).text()==="0"){
$(".state").eq(i).css({"background":"#eee","color":"#eee"})
}
if($(".state").eq(i).text()==="1"){
$(".state").eq(i).css({"background":"red","color":"red"})
}
if($(".state").eq(i).text()==="2"){
$(".state").eq(i).css({"background":"blue","color":"blue"})
}
}
//动态获取高度值
$(".meet").css({"height":426/mettingRoom.length+"px","line-height": 426/mettingRoom.length+"px"})
$(".meetstate").css({"height":426/mettingRoom.length+"px"})
$(".state").css({"height":426/mettingRoom.length+"px","width":(800-107)/7+"px"})
</script>
</html>本人菜鸟，临时起意写的一段代码，欢迎指正