Js封装的《家教搜》预约上课方法
效果预览地址：http://jsfiddle.net/dtdxrk/E4MPX/embedded/result/
1 <!DOCTYPE HTML> 2 <html lang="en"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>Js封装的家教搜预约上课方法</title> 6 <script src="jquery-1.9.1.min.js"></script> 7 <style> 8 *{margin:0;padding: 0;font-family:Arial;line-height: 1;} 9 h1{margin-top: 20px;} 10 table,table td, table th{border: 1px solid #ccc;border-collapse: collapse;} 11 td,th{padding: 10px;} 12 th{background-color: #ececec;} 13 td{cursor: pointer;} 14 15 td.yes{background-color:green;color: #fff;} 16 td.no{background-color: red} 17 #txt{background-color: green;padding: 5px;color: #fff;font-size: 18px;line-height: 1.5;} 18 </style> 19 </head> 20 <body> 21 <div id="txt"> 22 Js封装的《家教搜》预约上课方法<br/> 23 一共有3种状态 展示课表/个别课表可编辑/课表全部可编辑<br/> 24 处于编辑模式时 每次选择都会改变实例的this.arr并且返回到input的value里 25 </div> 26 27 <input type="hidden" name="schooltime" id="relTimetable" /> 28 <h1>1.展示课表</h1> 29 <div id="timetable"></div> 30 31 <h1>2.个别课表可编辑</h1> 32 <div id="timetable2"></div> 33 34 <h1>3.课表全部可编辑</h1> 35 <div id="timetable3"></div> 36 <script> 37 /* 38 * @param var table = new timetable(string,status,id);//status=editAll 全部可以选择 status=editOnly只能部分选择 39 * @param $(obj).html(table.show()); 40 * @input <input type="hidden" name="schooltime" id="relTimetable" />//如果是编辑状态要有个隐藏的input传值 固定id "relTimetable" 41 */ 42 43 function timetable(arr,status,id){ 44 this.arr = arr.split(",");//string转成数组 45 this.status = status; 46 this.id = id;//自定义table id 47 } 48 timetable.prototype = { 49 show : function(){//输出数据 50 var table = "<table id="+this.id+" class='time-t'><tr><th>时间</th><th>一</th><th>二</th><th>三</th><th>四</th><th>五</th><th>六</th> <th>日</th></tr>"; 51 table += "<tr><th><span class='sw'>上午</span></th>"+ this.tdSlice(0,7,0) + "</tr>"; 52 table += "<tr><th><span class='xw'>下午</span></th>"+ this.tdSlice(7,14,1) + "</tr>"; 53 table += "</tr><tr><th><span class='ws'>晚上</span></th>"+ this.tdSlice(14,21,2) +"</tr>"; 54 table += "</table>"; 55 if(this.status=="editOnly" || this.status=="editAll") this.tdClick();//添加点击事件 56 if(this.status=="editOnly") this.arr=[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]; 57 return table; 58 }, 59 tdSlice : function(start,end,position){//展示td 60 var tempArr = this.arr.slice(start,end), 61 trNumber, 62 tds = ""; 63 switch(position){ 64 case 0 : trNumber=0; break; 65 case 1 : trNumber=7; break; 66 case 2 : trNumber=14; break; 67 } 68 for(var i in tempArr){ 69 if(tempArr[i]=="0"){//0 70 if(this.status=="editAll"){//可编辑 71 tds += "<td name='edit' index="+(parseInt(i)+trNumber)+"></td>"; 72 }else{ 73 tds += "<td class='no'></td>" 74 } 75 }else{//1 76 if(this.status=="editOnly"){ 77 tds += "<td class='yes' name='edit' index="+(parseInt(i)+trNumber)+"></td>"; 78 }else{ 79 tds += "<td class='yes'>√</td>"; 80 } 81 82 } 83 } 84 return tds; 85 }, 86 tdClick : function(){//td添加点击事件 87 var that = this; 88 $(function(){ 89 $("#"+that.id+" [name='edit']").on("click",function(){ 90 var index = $(this).attr("index"); 91 if(that.arr[index]=="0"){ 92 $(this).html("√"); 93 that.arr[index]="1"; 94 }else{ 95 $(this).html(""); 96 that.arr[index]="0"; 97 } 98 $("#relTimetable").val(that.arr.join(",")); 99 }); 100 }); 101 } 102 103 104 } 105 106 //展示 107 var table1 = new timetable("0,0,0,0,1,0,0,0,0,0,0,0,1,0,0,0,0,1,0,0,0","","t1"); 108 $("#timetable").html(table1.show()); 109 110 //个别可编辑 111 var table2 = new timetable("0,0,0,0,1,0,0,0,0,0,0,0,1,0,0,0,0,1,0,0,0","editOnly","t2"); 112 $("#timetable2").html(table2.show()); 113 114 115 //全部可编辑 116 var table3 = new timetable("0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0","editAll","t3"); 117 $("#timetable3").html(table3.show()); 118 119 120 </script> 121 </body> 122 </html>