html5面向对象删除操作

<script type="text/javascript">
var Datas = {
		SYear : 0,
		SMonth : 0,
		SDay : 0 ,
		SaveMonthIndex :-1,
		DeleteMonthIndex :-1,
		CheckSaveDay :[],  
		CheckSaveDayBoolen :true, 
	}

 
</script>

<script type="text/javascript">
	// console.log(Datas);
	// console.log(Datas.SYear);
	// console.log(Datas.SMonth);
	// console.log(Datas.SDay);
	// SaveDay
	console.log(Datas);
	$('.cell').on('click',function(){
	  
		var SoSave = $(this).find('.so').text(); // 要保存的数据
		for (var i = 0; i < Datas.CheckSaveDay.length; i++) {
			var DataCheckDay = Datas.CheckSaveDay[i].SaveDay;
			//console.log(DataCheckDay);
	 		 if(DataCheckDay == SoSave){
	 		 	Datas.CheckSaveDayBoolen = false;
	 		 	Datas.DeleteMonthIndex = i;
	 		 	break;
	 		 } else{
	 		 		Datas.CheckSaveDayBoolen = true;
				    Datas.SaveMonthIndex = i;
	 		 	}
	 	}
	 	if (Datas.CheckSaveDayBoolen) {
	 		// 没找到 可以添加
	 		var SoSaveNav = {SaveDay :SoSave,ShowBo :true}
	 		Datas.CheckSaveDay.push(SoSaveNav);
	 		console.log(Datas.SaveMonthIndex + "add" +  Datas.DeleteMonthIndex );
	 		  
	 		$(this).css("border","1px solid red");
	 	}else{
	 		//有数据 可以删除
	 			Datas.CheckSaveDayBoolen = true;
	 			Datas.CheckSaveDay.splice(Datas.DeleteMonthIndex,1); // 删除根据当前选中的索引
	 				$(this).css("border","");
	 		 	console.log(Datas.SaveMonthIndex + "del" +  Datas.DeleteMonthIndex );
	 		 	 
	 	}
	 	 
	 	console.log(Datas);
		
		
		 
	});
	if(true){
		
	}else{
	debugger;

	}
 


</script>

   <table cellpadding="0" cellspacing="0" id="1">
    <tr>
        <td>
        <div id="cal">
        <div id="top">公元 <select>
        </select> 年 <select>
        </select> 月 农历<span></span>年 [ <span></span>年 ] <input type="button"
            value="回到今天" title="点击后跳转回今天" style="padding: 0px"></div>
        <ul id="wk">
            <li>一</li>
            <li>二</li>
            <li>三</li>
            <li>四</li>
            <li>五</li>
            <li><b>六</b></li>
            <li><b>日</b></li>
        </ul>
        <div id="cm"></div>
        <div id="bm"></div>
        </div>
        </td>
    </tr>
</table>

	

   <style>
body,td,.p1,.p2,.i {
    font-family: arial
}
 
body {
    margin: 0px 0 0 0;
    background-color: #fff;
    color: #000;
}
 
table {
    border: 0
}
 
#cal {
    width: 434px;
    border: 1px solid #c3d9ff;
    font-size: 12px;
    margin: 8px 0 0 15px
}
 
#cal #top {
    height: 29px;
    line-height: 29px;
    background: #e7eef8;
    color: #003784;
    padding-left: 70px
}
 
#cal #top select {
    font-size: 12px
}
 
#cal #top input {
    padding: 0
}
 
#cal ul#wk {
    margin: 0;
    padding: 0;
    height: 25px
}
 
#cal ul#wk li {
    float: left;
    width: 60px;
    text-align: center;
    line-height: 25px;
    list-style: none
}
 
#cal ul#wk li b {
    font-weight: normal;
    color: #c60b02
}
 
#cal #cm {
    clear: left;
    border-top: 1px solid #ddd;
    border-bottom: 1px dotted #ddd;
    position: relative
}
 
#cal #cm .cell {
    position: absolute;
    width: 42px;
     
    text-align: center;
    margin: 0 0 0 9px
}

#cal #cm  {
    
    height: 80px;
  
}
 .cell {
    
    height: 70px;
  
}

 #cm{ height: 400px; }
 
#cal #cm .cell .so {
  /*  font: bold 16px arial;*/
   
}
 
#cal #bm {
    text-align: right;
    height: 24px;
    line-height: 24px;
    padding: 0 13px 0 0
}
 
#cal #bm a {
    color: 7977ce
}
 
#cal #fd {
    display: none;
    position: absolute;
    border: 1px solid #dddddf;
    background: #feffcd;
    padding: 10px;
    line-height: 21px;
    width: 150px
}
 
#cal #fd b {
    font-weight: normal;
    color: #c60a00
}
  
 .cell div{line-height: 30px;}
</style>

当点击按钮的时候 可以把数据进行添加到现在的数据对象中

再次点击的时候进行取消已有的数据