今日分享一点干货。PHP中课程表的实现。，.php课程表
首先贴代码，代码贴完再细说：
前段HTML：
1 <div id="studentRead" class="reading" style="z-index:10" > 2 <div class="class-table"> 3 <div class="class-table-tit clearfix"> 4 <h3 class="fl">班级课程表h3> 5 <a class="fr" id ='studentEditKcb' attr="edit" onclick = "editKcb(this);" style="cursor:pointer;">编辑 6 a> 7 div> 8 <table border="0" cellspacing="0" cellpadding="0" id = "myTable"> 9 <tr> 10 <th width="5%">th> 11 <th width="19%">周一th> 12 <th width="19%">周二th> 13 <th width="19%">周三th> 14 <th width="19%">周四th> 15 <th width="19%">周五th> 16 tr> 17 <tr id = "focustr"> 18 <td rowspan="4" class="td-bg">上<br/>午td> 19 <volist name = "dataListStu" id = "val" offset="0" length='1'> 20 <volist name = "val" id = "value"> 21 <td> 22 <input id = "focusId" readonly="true" maxlength='7' type="text" value="{$value}" /> 23 td> 24 volist> 25 volist> 26 tr> 27 <volist name = "dataListStu" id = "val" offset="1" length='3'> 28 <tr> 29 <volist name = "val" id = "value"> 30 <td> 31 <input readonly="true" maxlength='7' type="text" value="{$value}" /> 32 td> 33 volist> 34 tr> 35 volist> 36 <tr> 37 <td rowspan="4" class="td-bg">下<br/>午td> 38 <volist name = "dataListStu" id = "val" offset="4" length='1'> 39 <volist name = "val" id = "value"> 40 <td> 41 <input readonly="true" maxlength='7' type="text" value="{$value}" /> 42 td> 43 volist> 44 volist> 45 tr> 46 <volist name = "dataListStu" id = "val" offset="5" length='3'> 47 <tr> 48 <volist name = "val" id = "value"> 49 <td> 50 <input readonly="true" maxlength='7' type="text" value="{$value}" /> 51 td> 52 volist> 53 tr> 54 volist> 55 table> 56 div> 57 div>
Copy after login
CSS：
![今日分享一点干货。PHP中课程表的实现。，.php课程表_PHP教程]()
1
/*
课程表
*/
2
.class-table{
3
background:
#f6fafe;
4
border:
1px solid #e9ecee;
5
-webkit-border-radius:
5px;
6
width:
478px;
7
padding:
10px 20px 20px;
8
-moz-border-radius:
5px;
9
border-radius:
5px;
10}
11
.class-table-tit{
12
height:
30px;
13
line-height:
30px;
14}
15
.class-table-tit h3{
16
color:
#666;
17
font-size:
16px;
18
font-weight:
bold;
19}
20
.class-table-tit a{
21
font-size:
14px;
22
color:
#187aff;
23}
24
.class-table table{
25
width:
100%;
26}
27
.class-table table th{
28
height:
40px;
29
background:
#aedf74;
30
text-align:
center;
31
border-right:
1px solid #9dc968;
32}
33
.class-table table th:first-child{
34
background:
#89cc4a;
35
border-right:
0;
36}
37
.class-table table td{
38
height:
30px;
39
border:
solid #e3eaf1;
40
border-width:
0 1px 1px 0;
41
text-align:
center;
42
font-size:
14px;
43
color:
#666;
44}
45
.class-table table td input{
46
border:
0;
47
height:
20px;
48
line-height:
20px;
49
width:
70%;
50
background:
none;
51
text-align:
center;
52
color:
#666;
53}
54
.class-table table td input.activeStu{
55
background:
#66a7ff;
56
color:
#fff;
57}
58
.td-bg{
59
background:
#c4ea96;
60}
View Code
JS部分：
![今日分享一点干货。PHP中课程表的实现。，.php课程表_PHP教程]()
1
varflagkcb =
true
;
2
//
控制课程表编辑和完成。
3
function
editKcb(obj){
4
vareditHtml = $(obj).attr('attr'
);
5
if(editHtml == 'edit'
){
6$(".class-table table td input").attr('class','activeStu'
);
7$(".class-table input").attr('readonly',
false
);
8$("#studentEditKcb").html('完成'
);
9$(".class-table table td input").attr('class','activeStu'
);
10$("#focustr td:nth-child(2) input"
).focus();
11$(obj).attr('attr','save'
);
12}
else
{
13
if
(flagkcb){
14
reloadKCB();
15$(obj).attr('attr','edit'
);
16}
else
{
17alert('数据保存中,请勿重复提交！'
);
18
}
19
}
20
}
21
22
23
24
25
//
获取页面表格内的数据
26
function
getTableValue(){
27
varkecbInput = $(".activeStu"
);
28
vari = 0
;
29
varj= 0
;
30
vardata =
[];
31
vardata2 =
[];
32$.each(kecbInput,
function
(k,v){
33data2[j] =
v.value;
34j++
;
35
if((k+1)%5==0
){
36j = 0
;
37data[i] =
data2;
38data2 =
[];
39i++
;
40
}
41
});
42
return
data;
43
}
44
45
//
课程表
46
function
reloadKCB(){
47$("#records"
).hide();
48$("#classba"
).hide();
49$("#classhare"
).hide();
50$("#homework"
).hide();
51$('#studentRead'
).show();
52
vardata =
getTableValue();
53
//
根据ajax加载,若加载后数据为空,则证明该学生没有编辑过课程表，直接显示
54
$.ajax({
55type:"POST"
,
56url: U('public/Index/savekcb'
),
57data:{"data"
:data},
58dataType:"json"
,
59success:
function
(response){
60flagkcb =
true
;
61$(".class-table table td input").removeAttr('class','activeStu'
);
62$(".class-table input").attr('readonly',
true
);
63$("#studentEditKcb").html('编辑'
);
64
},
65error:
function
(msg){
66flagkcb =
true
;
67alert('保存失败请重试'
);
68
//
$("#studentRead").show();
69
//
$("#studentRead").html("").html("加载失败，请重试！
");
70
}
71
});
72
73
//
74
//
}
75}
View Code
后端部分：
![今日分享一点干货。PHP中课程表的实现。，.php课程表_PHP教程]()
1
/*
*
2
* 学生课程表个人编辑保存
3
*/
4
public
function
savekcb(){
5
$saveResult=
array('status'=>200,'msg'=>'保存成功'
);
6
//
拿到的是一个二维数组
7
$data=
$_REQUEST['data'
];
8
$user=
$GLOBALS['ts']['cyuserdata'
];
9
//
课程表数据转成json格式保存
10
$saveArray= json_encode(
$data
);
11
//
空间用户id
12
$uid=
$this->
uid ;
13
//
用户cyuid
14
$saveData=
array
();
15
$saveData['cyuid'] =
$user['user']['cyuid'
];
16
$saveData['uid'] =
$uid
;
17
$saveData['kcb'] =
$saveArray
;
18
//
创建时间
19
$saveData['createtime'] =
date('Y-m-d H:i:s'
);
20
$saveData['updatetime'] =
date('Y-m-d H:i:s'
);
21
22
$isExit= D('StudentKcb')->where("`uid`=
$uid")->
find();
23
if(
$isExit
){
24
unset(
$saveData['createtime'
]);
25
$result= D('StudentKcb')->where("`uid`=
$uid")->save(
$saveData
);
26}
else
{
27
$result= D('StudentKcb')->add(
$saveData
);
28
}
29
if(!
$result
){
30
$saveResult=
array('status'=>400,'msg'=>'保存失败'
);
31}
else
{
32
$stuKcb= json_decode(
$result['kcb'],
true
);
33S(
$this->uid."_student_kcb",
$stuKcb,60*5
);
34
}
35
exit(json_encode(
$saveResult
));
36
}
37
38
/*
*
39
* 个人学生空间页面课程表初始化
40
*/
41
private
function
initkcb(){
42
$result= S(
$this->uid."_student_kcb"
);
43
if(!
$result
){
44
//
空间用户id
45
$uid=
$this->
uid ;
46
$result= D('StudentKcb')->where("`uid`=
$uid")->
find();
47
$result= json_decode(
$result['kcb'],
true
);
48
if(!
$result
){
49
$result=
array
(
500=>
array('','','','',''),
511=>
array('','','','',''),
522=>
array('','','','',''),
533=>
array('','','','',''),
544=>
array('','','','',''),
555=>
array('','','','',''),
566=>
array('','','','',''),
577=>
array('','','','',''),
58
);
59
}
60S(
$this->uid."_student_kcb",
$result,60*5
);
61
}
62
63
$this->assign('dataListStu',
$result
);
64
}
65
66}
View Code
开始细说:先来一张效果图吧。编辑前：
编辑中(点右上角编辑后)：
加了一些定位跟背景色的变化。让用户有更好体验，
第一步：在接这个需求的时候，首先我在想怎么去获取表格内的数据，我首先想到的是 利用for循环嵌套，而后加判断，把数据往定义好的数组里添加，但是后来一想那样的话会导致
数据正确没错，但是存的数据有问题我打个比方 data[]={
data[1]={
data[1][1] = 0;
... ...
}
data[2]={ data[2][0]= 1;
... ...
}
... ...
}
意思就是我按照行循环的时候, 因为第一行跟第五行 多了一个
的存在， 会导致我的下标是从1开始 而不是跟其他行一样从0开始。
后来我想不这样做，我加一个独有的class，就有了 var kecbInput = $(".activeStu"); 这句话。 这句话的意思是获取所有class="activeStu" 的对象的集合。
至于余下的循环写法 如果有看不懂的可以在文章里直接提问，就不细说了。
第二步：写完获取值后，剩下的无非就是传值到后台了，思路是每一个学生有一张属于他自身独有的课程表。还是老方法 利用ajax传值。 在保存数据的时候，将数据保存成json格式进行存 储。
第三步：传值到前台页面并展示， 其实这个地方 ,如果有不少同学说, 这个简单着呢，不就是for循环 利用js 控制显示嘛， 那么就证明你没有掌握php volist 标签的好用之处！
利用volist 可以很轻松的如我贴出来的代码一样 将你想要赋的值 展现出来。
很多东西其实都在贴出来的代码里了，我表达能力不是很好，或者说我对这些东西理解也没到一定的程度。
本来我是想 可以分享一些思路给大家， 但是写着写着发现 ，其实也没什么好说的。 不就这样么。 但是我还是觉得发出来好些吧， 可能有些人需要呢？虽然简单也没花多长时间。但是我相 信不停的分享，可能你的感悟就更深一些。
http://www.bkjia.com/PHPjc/1102847.html
www.bkjia.com
true
http://www.bkjia.com/PHPjc/1102847.html
TechArticle
今日分享一点干货。PHP中课程表的实现。，.php课程表 首先贴代码，代码贴完再细说： 前段HTML： 1 div id ="studentRead" class ="reading" style ="z-i...
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
