var mcode={"minfo":[{"time":"9:00-10:00","status":2},{"time":"10:00-11:00","status":1},{"time":"11:00-12:00","status":3},{"time":"13:00-14:00","status":1},{"time":"14:00-15:00","status":1},{"time":"15:00-16:00","status":1},{"time":"16:00-17:00","status":1},{"time":"17:00-18:00","status":1}]};

其中time代表時間段，status當(dāng)職位1時代表可以使用，2時代表已過期，3時代表已選滿。
通過循環(huán)遍歷json字符串中的數(shù)據(jù)值。

復(fù)制代碼代碼如下:

 
for(var i in mcode.minfo){ 
mcode.minfo[i].time + mcode.minfo[i].status; 
} 

當(dāng)前時間段為已過期或以選滿時，鼠標(biāo)移動到其當(dāng)前時間段上時提示相應(yīng)信息，鼠標(biāo)移開取消提示。
當(dāng)前時間段為橘黃色代表可以選擇。

復(fù)制代碼代碼如下:

 
$.each($("#test span"),function(k,v){ 
if($(this).hasClass("unspan1")||$(this).hasClass("unspan2")){ 
$(this).hover(function(){ 
$(this).find("label").css({"display":"block"}); 
$(this).find("em").css({"display":"block"}); 
}, function(){ 
$(this).find("label").css({"display":"none"}); 
$(this).find("em").css({"display":"none"}); 
}); 
} 
else{ 
$(this).click(function(){ 
　　$("#result").empty().html("您選擇了："+$(this).text()); 
}); 
} 
}); 

拼接字符串，構(gòu)建html結(jié)構(gòu)。

復(fù)制代碼代碼如下:

 
for(var i in mcode.minfo){ 
if(mcode.minfo[i].status===2){ 
html+='<span class="unspan1 '; 
} 
else if(mcode.minfo[i].status===3){ 
html+='<span class="unspan2 '; 
} 
else{ 
html+='<span class=" '; 
} 
if((i+1)%3===0){ 
html+='" >'; 
} 
else{ 
html+='mspan" >'; 
} 
html+=mcode.minfo[i].time; 
if(mcode.minfo[i].status===2){ 
html+='<label>已過期</label>'; 
} 
else if(mcode.minfo[i].status===3){ 
html+='<label>已選滿</label>'; 
} 
if(mcode.minfo[i].status!==1){ 
html+='<em></em>'; 
} 
html+="</span>"; 
} 

css樣式：

復(fù)制代碼代碼如下:

 
#test{ width: 430px; padding: 35px; border: 1px solid #666666;overflow: hidden; margin: 100px auto 0px;} 
#test span{display:block; background: #FF6600; width:130px; height: 30px; line-height: 30px; text-align: center; float:left; 
_display:inline; position:relative; margin-bottom: 15px; cursor: pointer;} 
#test .mspan{margin-right: 20px;} 
#test .unspan1{background: #D2E0E6; cursor:default} 
#test .unspan2{background: #ffcaca; cursor: default;} 
#test label{position: absolute; left:25px; top:-18px; width: 60px; line-height: 20px; background: #F3F3F3; 
padding:1px 10px; border:1px solid #CCCCCC;display: none;} 
#test em{display: block;border-color: #F3F3F3 transparent transparent transparent;border-style: solid;border-width: 6px 6px 6px 6px; 
padding: 0;width: 0;height: 0; 
font-size: 0;line-height: 0; 
position: absolute;left:58px; top:5px;display:none; 
_border-top-color: #F3F3F3;_border-bottom-color: #F3F3F3; 
_filter: chroma( color = #F3F3F3); 
} 
#result{ margin: 10px auto 0px; text-align: center} 

實例：

復(fù)制代碼代碼如下:

 
<!DOCTYPE html> 
<html> 
<head> 
<title></title> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
<script type="text/javascript" src="http://demo.jb51.net/jslib/jquery/jquery.js"></script> 
<style type="text/css"> 
*{margin:0px;padding: 0px;} 
#test{ width: 430px; padding: 35px; border: 1px solid #666666;overflow: hidden; margin: 100px auto 0px;} 
#test span{display:block; background: #FF6600; width:130px; height: 30px; line-height: 30px; text-align: center; float:left; _display:inline; position:relative; margin-bottom: 15px; cursor: pointer;} 
#test .mspan{margin-right: 20px;} 
#test .unspan1{background: #D2E0E6; cursor:default} 
#test .unspan2{background: #ffcaca; cursor: default;} 
#test label{position: absolute; left:25px; top:-18px; width: 60px; line-height: 20px; background: #F3F3F3; padding:1px 10px; border:1px solid #CCCCCC;display: none;} 
#test em{display: block;border-color: #F3F3F3 transparent transparent transparent;border-style: solid;border-width: 6px 6px 6px 6px; 
padding: 0;width: 0;height: 0; 
font-size: 0;line-height: 0; 
position: absolute;left:58px; top:5px;display:none; 
_border-top-color: #F3F3F3;_border-bottom-color: #F3F3F3; 
_filter: chroma( color = #F3F3F3); 
} 
#result{ margin: 10px auto 0px; text-align: center} 
</style> 
</head> 
<body> 
<div id="test"> 
</div> 
<div id="result"></div> 
<script type="text/javascript"> 
var mcode = { 
"minfo": [ 
{ 
"time": "9:00-10:00", 
"status": 2 
}, 
{ 
"time": "10:00-11:00", 
"status": 1 
}, 
{ 
"time": "11:00-12:00", 
"status": 3 
}, 
{ 
"time": "13:00-14:00", 
"status": 1 
}, 
{ 
"time": "14:00-15:00", 
"status": 1 
}, 
{ 
"time": "15:00-16:00", 
"status": 1 
}, 
{ 
"time": "16:00-17:00", 
"status": 1 
}, 
{ 
"time": "17:00-18:00", 
"status": 1 
} 
] 
}; 
var html = ''; 
for(var i in mcode.minfo){ 
if(mcode.minfo[i].status===2){ 
html+='<span class="unspan1 '; 
} 
else if(mcode.minfo[i].status===3){ 
html+='<span class="unspan2 '; 
} 
else{ 
html+='<span class=" '; 
} 
if((i+1)%3===0){ 
html+='" >'; 
} 
else{ 
html+='mspan" >'; 
} 
html+=mcode.minfo[i].time; 
if(mcode.minfo[i].status===2){ 
html+='<label>已過期</label>'; 
} 
else if(mcode.minfo[i].status===3){ 
html+='<label>已選滿</label>'; 
} 
if(mcode.minfo[i].status!==1){ 
html+='<em></em>'; 
} 
html+="</span>"; 
} 
$("#test").empty().html(html); 
$.each($("#test span"),function(k,v){ 
if($(this).hasClass("unspan1")||$(this).hasClass("unspan2")){ 
$(this).hover(function(){ 
$(this).find("label").css({"display":"block"}); 
$(this).find("em").css({"display":"block"}); 
}, function(){ 
$(this).find("label").css({"display":"none"}); 
$(this).find("em").css({"display":"none"}); 
}); 
} 
else{ 
$(this).click(function(){ 
$("#result").empty().html("您選擇了："+$(this).text()); 
}); 
} 
}); 
</script> 
</body> 
</html> 