JSFiddle - React, Tailwind, and code Playground

by dtdxrk

HTML

<div id="txt">
Js封装的《家教搜》预约上课方法<br/>
一共有3种状态 展示课表/个别课表可编辑/课表全部可编辑<br/>
处于编辑模式时 每次选择都会改变实例的this.arr并且返回到input的value里
</div>

<input type="hidden" name="schooltime" id="relTimetable" />
<h1>1.展示课表</h1>    
<div id="timetable"></div>

<h1>2.个别课表可编辑</h1>    
<div id="timetable2"></div>

<h1>3.课表全部可编辑</h1>    
<div id="timetable3"></div>

CSS

*{margin:0;padding: 0;font-family:Arial;line-height: 1;}
	h1{margin-top: 20px;}
	table,table td, table th{border: 1px solid #ccc;border-collapse: collapse;}
	td,th{padding: 10px;}
	th{background-color: #ececec;}
	td{cursor: pointer;}

	td.yes{background-color:green;color: #fff;}
	td.no{background-color: red}
	#txt{background-color: green;padding: 5px;color: #fff;font-size: 18px;line-height: 1.5;}

JavaScript

/*
* @param var table = new timetable(string,status,id);//status=editAll 全部可以选择  status=editOnly只能部分选择
* @param $(obj).html(table.show());
* @input <input type="hidden" name="schooltime" id="relTimetable" />//如果是编辑状态要有个隐藏的input传值  固定id "relTimetable" 
*/

function timetable(arr,status,id){
	this.arr = arr.split(",");//string转成数组
	this.status = status;
	this.id = id;//自定义table id
}
timetable.prototype = {
	show : function(){//输出数据
		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>";
			table += "<tr><th><span class='sw'>上午</span></th>"+ this.tdSlice(0,7,0) + "</tr>";
			table += "<tr><th><span class='xw'>下午</span></th>"+ this.tdSlice(7,14,1) + "</tr>";
			table += "</tr><tr><th><span class='ws'>晚上</span></th>"+ this.tdSlice(14,21,2) +"</tr>";
			table += "</table>";
		if(this.status=="editOnly" || this.status=="editAll") this.tdClick();//添加点击事件
		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];
		return table;
	},
	tdSlice : function(start,end,position){//展示td
		var tempArr = this.arr.slice(start,end),
			trNumber,
			tds = "";
		switch(position){
			case 0 : trNumber=0; break;
			case 1 : trNumber=7; break;
			case 2 : trNumber=14; break;
		}
		for(var i in tempArr){
			if(tempArr[i]=="0"){//0
				if(this.status=="editAll"){//可编辑
					tds += "<td name='edit' index="+(parseInt(i)+trNumber)+"></td>";
				}else{
					tds += "<td class='no'></td>"
				}	
			}else{//1
				if(this.status=="editOnly"){
					tds += "<td class='yes' name='edit' index="+(parseInt(i)+trNumber)+"></td>";
				}else{
					tds += "<td class='yes'>√</td>";	
				}
				
			} 
		}
		return tds;
	},
	tdClick : function(){//td添加点击事件
		var that = this;
		$(function(){
			$("#"+that.id+" [name='edit']").on("click",function(){
				var index =...