今日分享一点干货。PHP中课程表的实现。

首先贴代码，代码贴完再细说：

前段HTML：

  <div id="studentRead" class="reading" style="z-index:10" >
                          <div class="class-table">
                             <div class="class-table-tit clearfix">
                                 <h3 class="fl">班级课程表</h3>
                                 <a class="fr" id ='studentEditKcb' attr="edit" onclick = "editKcb(this);" style="cursor:pointer;">编辑
                                 </a>
                             </div>
                                 <table border="0" cellspacing="0" cellpadding="0" id = "myTable">
                                     <tr>
                                         <th width="5%"></th>
                                         <th width="19%">周一</th>
                                         <th width="19%">周二</th>
                                         <th width="19%">周三</th>
                                         <th width="19%">周四</th>
                                         <th width="19%">周五</th>
                                     </tr>
                                     <tr id = "focustr">
                                         <td rowspan="4" class="td-bg">上<br/>午</td>
                                         <volist name = "dataListStu" id = "val" offset="0" length='1'>
                                             <volist name = "val" id = "value">
                                             <td>
                                                 <input  id = "focusId" readonly="true" maxlength='7' type="text"  value="{$value}" />
                                             </td>
                                             </volist>
                                         </volist>
                                     </tr>
                                     <volist name = "dataListStu" id = "val" offset="1" length='3'>
                                         <tr>
                                             <volist name = "val" id = "value">
                                             <td>
                                                 <input   readonly="true" maxlength='7' type="text"  value="{$value}" />
                                             </td>
                                             </volist>
                                         </tr>
                                     </volist>
                                     <tr>
                                         <td rowspan="4" class="td-bg">下<br/>午</td>
                                         <volist name = "dataListStu" id = "val" offset="4" length='1'>
                                             <volist name = "val" id = "value">
                                             <td>
                                                 <input   readonly="true" maxlength='7' type="text"  value="{$value}" />
                                             </td>
                                             </volist>
                                         </volist>
                                     </tr>
                                     <volist name = "dataListStu" id = "val" offset="5" length='3'>
                                         <tr>
                                             <volist name = "val" id = "value">
                                             <td>
                                                 <input   readonly="true" maxlength='7' type="text"  value="{$value}" />
                                             </td>
                                             </volist>
                                         </tr>
                                     </volist>
                             </table>
                         </div>
                  </div>

CSS：

 /*课程表*/
 .class-table{
     background: #f6fafe;
     border: 1px solid #e9ecee;
     -webkit-border-radius: 5px;
     width: 478px;
     padding: 10px 20px 20px;
     -moz-border-radius: 5px;
     border-radius: 5px;
 }
 .class-table-tit{
     height: 30px;
     line-height: 30px;
 }
 .class-table-tit h3{
     color: #666;
     font-size: 16px;
     font-weight: bold;
 }
 .class-table-tit a{
     font-size: 14px;
     color: #187aff;
 }
 .class-table table{
     width: 100%;
 }
 .class-table table th{
     height: 40px;
     background: #aedf74;
     text-align: center;
     border-right: 1px solid #9dc968;
 }
 .class-table table th:first-child{
     background: #89cc4a;
     border-right:;
 }
 .class-table table td{
     height: 30px;
     border: solid #e3eaf1;
     border-width: 0 1px 1px 0;
     text-align: center;
     font-size: 14px;
     color: #666;
 }
 .class-table table td input{
     border:;
     height: 20px;
     line-height: 20px;
     width: 70%;
     background: none;
     text-align: center;
     color: #666;
 }
 .class-table table td input.activeStu{
     background: #66a7ff;
     color: #fff;
 }
 .td-bg{
     background: #c4ea96;
 }

JS部分：

   var flagkcb = true;
      //控制课程表编辑和完成。
      function editKcb(obj){
          var editHtml = $(obj).attr('attr');
          if(editHtml == 'edit'){
              $(".class-table table td input").attr('class','activeStu');
              $(".class-table input").attr('readonly',false);
              $("#studentEditKcb").html('完成');
              $(".class-table table td input").attr('class','activeStu');
              $("#focustr td:nth-child(2) input").focus();
              $(obj).attr('attr','save');
          }else{
              if(flagkcb){
                  reloadKCB();
                  $(obj).attr('attr','edit');
              }else{
                  alert('数据保存中,请勿重复提交！');
              }
          }
      }

      //获取页面表格内的数据
      function getTableValue(){
          var kecbInput = $(".activeStu");
          var i = 0;
          var j= 0;
          var data = [];
          var data2 = [];
          $.each(kecbInput,function(k,v){
              data2[j] = v.value;
              j++;
              if((k+1)%5==0){
                  j = 0;
                  data[i] = data2;
                  data2 = [];
                  i++;
              }
          });
          return data;
      }

      //课程表
      function reloadKCB(){
          $("#records").hide();
          $("#classba").hide();
          $("#classhare").hide();
          $("#homework").hide();
          $('#studentRead').show();
          var data = getTableValue();
          //根据ajax加载,若加载后数据为空,则证明该学生没有编辑过课程表，直接显示
             $.ajax({
                 type:"POST",
                 url: U('public/Index/savekcb'),
                 data:{"data":data},
                 dataType:"json",
                 success:function(response){
                     flagkcb = true;
                      $(".class-table table td input").removeAttr('class','activeStu');
                      $(".class-table input").attr('readonly',true);
                      $("#studentEditKcb").html('编辑');
                 },
                 error:function(msg){
                     flagkcb = true;
                        alert('保存失败请重试');
 //                      $("#studentRead").show();
 //                     $("#studentRead").html("").html("<p style='padding:20px;'>加载失败，<a href='javascript:topic.init();'>请重试！</a></p>");
                 }
             });

 //
 //             }
      }

后端部分：

 /**
      * 学生课程表个人编辑保存
      */
     public function savekcb(){
         $saveResult = array('status'=>200,'msg'=>'保存成功');
         //拿到的是一个二维数组
         $data = $_REQUEST['data'];
         $user=$GLOBALS['ts']['cyuserdata'];
         //课程表数据转成json格式保存
         $saveArray = json_encode($data);
         //空间用户id
         $uid =  $this->uid ;
         //用户cyuid
         $saveData = array();
         $saveData['cyuid'] = $user['user']['cyuid'];
         $saveData['uid'] = $uid;
         $saveData['kcb'] = $saveArray;
         //创建时间
         $saveData['createtime'] = date('Y-m-d H:i:s');
         $saveData['updatetime'] = date('Y-m-d H:i:s');

         $isExit = D('StudentKcb')->where("`uid`=$uid")->find();
         if($isExit){
             unset($saveData['createtime']);
             $result = D('StudentKcb')->where("`uid`=$uid")->save($saveData);
         }else{
             $result = D('StudentKcb')->add($saveData);
         }
         if(!$result){
             $saveResult = array('status'=>400,'msg'=>'保存失败');
         }else{
             $stuKcb = json_decode($result['kcb'],true);
             S($this->uid."_student_kcb",$stuKcb,60*5);
         }
         exit(json_encode($saveResult));
     }

     /**
      * 个人学生空间页面课程表初始化
      */
     private function initkcb(){
         $result = S($this->uid."_student_kcb");
         if(!$result){
             //空间用户id
             $uid =  $this->uid ;
             $result = D('StudentKcb')->where("`uid`=$uid")->find();
             $result = json_decode($result['kcb'],true);
             if(!$result){
                 $result = array(
                     0=>array('','','','',''),
                     1=>array('','','','',''),
                     2=>array('','','','',''),
                     3=>array('','','','',''),
                     4=>array('','','','',''),
                     5=>array('','','','',''),
                     6=>array('','','','',''),
                     7=>array('','','','',''),
                 );
             }
             S($this->uid."_student_kcb",$result,60*5);
         }

         $this->assign('dataListStu',$result);
     }

 }

开始细说:先来一张效果图吧。编辑前：

　　　　　编辑中(点右上角编辑后)：

加了一些定位跟背景色的变化。让用户有更好体验，

　 第一步： 在接这个需求的时候，首先我在想怎么去获取表格内的数据，我首先想到的是  利用for循环嵌套，而后加判断，把数据往定义好的数组里添加，但是后来一想那样的话会导致

数据正确没错，但是存的数据有问题我打个比方   data[]={

　　　　　　　　　　　　　　　　　　　　　　　　　data[1]={

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　data[1][1] = 0;

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　... ...

　　　　　　}

　　　　　　　　　　　　　　　　　　　data[2]={　　　　　　　data[2][0]= 1;

　　　　　　　　　　　　　　　　　　　　　　　　　　... ...

　　　　　　}

　　　　　　　... ...

　　}

　意思就是我按照行循环的时候, 因为第一行跟第五行 多了一个<td>的存在， 会导致我的下标是从1开始 而不是跟其他行一样从0开始。

后来我想不这样做，我加一个独有的class，就有了   var kecbInput = $(".activeStu"); 这句话。 这句话的意思是获取所有class="activeStu" 的对象的集合。

至于余下的循环写法 如果有看不懂的可以在文章里直接提问，就不细说了。

第二步：写完获取值后，剩下的无非就是传值到后台了，思路是每一个学生有一张属于他自身独有的课程表。还是老方法 利用ajax传值。 在保存数据的时候，将数据保存成json格式进行存   储。

第三步：传值到前台页面并展示， 其实这个地方 ,如果有不少同学说, 这个简单着呢，不就是for循环 利用js 控制显示嘛， 那么就证明你没有掌握php volist 标签的好用之处！

利用volist  可以很轻松的如我贴出来的代码一样  将你想要赋的值 展现出来。

很多东西其实都在贴出来的代码里了，我表达能力不是很好，或者说我对这些东西理解也没到一定的程度。

本来我是想 可以分享一些思路给大家， 但是写着写着发现 ，其实也没什么好说的。 不就这样么。 但是我还是觉得发出来好些吧， 可能有些人需要呢？虽然简单也没花多长时间。但是我相 信不停的分享，可能你的感悟就更深一些。