Jsパッケージの「家庭教師検索」予約授業方法
52091 ワード
効果プレビューアドレス: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>