原生课程表插件
基于javascript原生
基于javascript原生,样式使用boostrap的部分样式(主要是快),可以自己修改样式和部分重要的class名称即可。
代码
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>test</title>
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<div style="width: 400px; margin: 0px auto; text-align: center;">
<h4>打开控制台查看数据</h4>
<button id="saves">save</button>
</div>
<div id="tablep"></div>
</body>
<script src="js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
<script src="bootstrap/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/tables.js" type="text/javascript" charset="utf-8"></script>
<script>
window.onload = function() {
var tb = new TimeTable({
el: "#tablep"
})
console.log(tb)
document.getElementById('saves').onclick = () => {
let arr = tb.handlerSaver()
console.log(arr)
}
}
</script>
</html>
tables.js
;
(function(window, undefined) {
'use strict'
var tablep = document.getElementById('tablep');
console.log('ok')
function TimeTable(obj) {
var _this = this
var totalArr = []
var WEEK = 7
var LESSON = 10
var defaultLesson = ['语文', '数学', '英语', '历史', '地理', '生物', '化学', '政治', '物理', '休息']
var arrObj = {
}
var dblclickListener, clickListener, editListener, defaultChooseListener
for(var i = 0; i < LESSON; i++) {
let needkey = 'arr' + i;
needkey = []
arrObj['arr' + i] = needkey
}
this.el = obj.el
this.tt = {
inits: () => {
// 初始化
this.tt._initTable() // 创建一个空白表格
this.tt._drawTable() // 绘制表格
this.tt._handlerClickTable() // 点击表格事件
},
_initTable: () => {
// 创建一个新的空白课程表
for(let i = 0; i < LESSON; i++) {
let itemArr = new Array(WEEK)
for(let j = 0;