当前位置：首页 > news >正文

jquery带有参照数据的效果处理

news 来源：原创 2024/5/4 1:25:36

为什么80%的码农都做不了架构师？>>>

几个简单小例子：

1.入门二级联动

2.二级联动

3.三级联动

4.简繁体转换

5.简单答题

6.创建课程表模板

这些例子有个共同的原理，就是有一个写好的参考数据模型，通过这个参考处理！什么参考，看下面！

一、最low的二级联动

我们运行下面的代码，引入jq类库

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jq插件简单开发</title>
<script type="text/javascript" src="js/jquery-1.10.2.js"></script>
<script type="text/javascript">
$(function(){
//start 
 $(".one-1").change(function(){
  var relval=$(this).val();
  handle(relval);
 });
 function handle(relval){
  switch(relval)
        {
              case '1':
               $(".tow-1").show().siblings().hide()
       break;
              case '2':
               $(".tow-2").show().siblings().hide()
       break;
              case '3':
               $(".tow-3").show().siblings().hide()
       break;
              case '4':
               $(".tow-4").show().siblings().hide()
       break;
              default:
      $(".sel-two").children().hide();
               ;
        }
 };
//end
});
</script>
<style type="text/css">
*{ padding:0; margin:0}
html,body{ height: 100%; width: 100%; position: relative;}
</style>
</head>
<body>
<span class="sel-one">
<select class="one-1">
 <option>请选择</option>
 <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
</select>
</span>
<span class="sel-two">
<select class="tow-1" style="display:none">
 <option>1-1</option>
    <option>1-2</option>
    <option>1-3</option>
    <option>1-4</option>
</select>
<select class="tow-2" style="display:none">
 <option>2-1</option>
    <option>2-2</option>
    <option>2-3</option>
    <option>2-4</option>
</select>
<select class="tow-3" style="display:none">
 <option>3-1</option>
    <option>3-2</option>
    <option>3-3</option>
    <option>3-4</option>
</select>
<select class="tow-4" style="display:none">
 <option>4-1</option>
    <option>4-2</option>
    <option>4-3</option>
    <option>4-4</option>
</select>
</span>
</body>
</html>

完全靠具体的分支判断去告诉要显示哪一个，如果少还可以，如果不是1-5而是20多个怎么办，估计这么写就累死，而且页面会有一大推select标签

二、二级联动流程实现

我引导大家这么去想：

1.页面存放一级的select标签，不过没有option内容，

2.一级select的option都是动态插入内容

3.内容我们放在一个数组里，如['请选择'，1,2,3,4]

4.找到一级select循环插入这些内容，

5.给一级select加change事件，输出一级select内容

下面是引导后的代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jq插件简单开发</title>
<script type="text/javascript" src="js/jquery-1.10.2.js"></script>
<script type="text/javascript">
$(function(){
//start 
 var onearr=["请选择",1,2,3,4];
 $.each(onearr,function(i,ele){
  $(".one-1").append('<option>'+onearr[i]+'</option>')
 });
  
 $(".one-1").change(function(){
  var relval=$(this).val();
  alert(relval)
 });
 
//end
});
</script>
<style type="text/css">
*{ padding:0; margin:0}
html,body{ height: 100%; width: 100%; position: relative;}
</style>
</head>
<body>
<span class="sel-one">
<select class="one-1">
 
</select>
</span>
<span class="sel-two">
</span>
</body>
</html>

我是利用jq的$.each工具函数，大家用for是一样的，现在我们完成了一级的实现。

接下来的引导：

1.我们点击一级后，我要弹出和他相关的所有内容，

2.我们可以充实数组，把一维的变为多维数组，如下

["请选择",1,2,3,4] 改为

[["请选择",'no'],[1,[11,11]],[2,[21,22,23,24]],[3,[31,32,333]],[4,[41]]];

形成如此数组，我们知道给一级select添加内容就是 arr[0][0]遍历处理了

3.输出一级内容相关的关系内容

代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jq插件简单开发</title>
<script type="text/javascript" src="js/jquery-1.10.2.js"></script>
<script type="text/javascript">
$(function(){
//start 
 var onearr=[["请选择",'no'],[1,[11,11]],[2,[21,22,23,24]],[3,[31,32,333]],[4,[41]]];
 $.each(onearr,function(i,ele){
  $(".one-1").append('<option>'+onearr[i][0]+'</option>')
 });
  
 $(".one-1").change(function(){
  var relval=$(this).val();
  $.each(onearr,function(i,ele){
   if(onearr[i][0]==relval){
    alert(onearr[i][1])
   }
  });
  
 });
 
//end
});
</script>
<style type="text/css">
*{ padding:0; margin:0}
html,body{ height: 100%; width: 100%; position: relative;}
</style>
</head>
<body>
<span class="sel-one">
<select class="one-1">
 
</select>
</span>
<span class="sel-two">
</span>
</body>
</html>

除了一级内容为“请选择”时，其他点击选中弹出的内容就应该是我们二级select的option，大家已经可以发现

我们对代码进行动态节点插入操作：

排除第一项，就是onearr[i][0]的i等于0的不插入select
根据一级select的内容与数组作对比，如果相等
开始创建二级select，并且把相关的内容循环插入select
我们每次二级select插入前要先删除它，避免累计

为了结构的统一，我们把数组改成[["请选择",[]],[1,[11,11]],[2,[21,22,23,24]],[3,[31,32,333]],[4,[41]]];

没有的就让相关数组为空

完整代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jq插件简单开发</title>
<script type="text/javascript" src="js/jquery-1.10.2.js"></script>
<script type="text/javascript">
$(function(){
//start 
 var onearr=[["请选择",[]],[1,[11,11]],[2,[21,22,23,24]],[3,[31,32,333]],[4,[41]]];
 $.each(onearr,function(i,ele){
  $(".one-1").append('<option>'+onearr[i][0]+'</option>')
 });
  
 $(".one-1").change(function(){
  var relval=$(this).val();
  $.each(onearr,function(i,ele){
   if(onearr[i][0]==relval){
    if(onearr[i][1].length==0){     
    $(".sel-two").children().remove();
    }else{
     $(".sel-two").children().remove();
     var twosel=$("<select></select>")
     $(".sel-two").append(twosel);
     $.each(onearr[i][1],function(j,ele){
      twosel.append('<option>'+onearr[i][1][j]+'</option>')
     });
    };     
    
   }
  });
  
 });
 
//end
});
</script>
<style type="text/css">
*{ padding:0; margin:0}
html,body{ height: 100%; width: 100%; position: relative;}
</style>
</head>
<body>
<span class="sel-one">
<select class="one-1">
 
</select>
</span>
<span class="sel-two">
</span>
</body>
</html>

三、三级联动

我们预览下面的二级联动，是不是有很相识的感觉

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jq插件简单开发</title>
<script type="text/javascript" src="js/jquery-1.10.2.js"></script>
<script type="text/javascript">
$(function(){
//start 
 var onearr=[["请选择",[]],["河北省",["唐山市","石家庄"]],["河南省",["郑州市","开封市","洛阳市","平顶山市"]],["吉林省",["长春市","四平市","白山市"]],["北京市",["朝阳区"]]];
 $.each(onearr,function(i,ele){
  $(".one-1").append('<option>'+onearr[i][0]+'</option>')
 });
  
 $(".one-1").change(function(){
  var relval=$(this).val();
  $.each(onearr,function(i,ele){
   if(onearr[i][0]==relval){
    if(onearr[i][1].length==0){
     $(".sel-two").children().remove();
    }else{
     $(".sel-two").children().remove();
     var twosel=$("<select></select>")
     $(".sel-two").append(twosel);
     $.each(onearr[i][1],function(j,ele){
      twosel.append('<option>'+onearr[i][1][j]+'</option>')
     });
    };     
    
   }
  });
  
 });
 
//end
});
</script>
<style type="text/css">
*{ padding:0; margin:0}
html,body{ height: 100%; width: 100%; position: relative;}
</style>
</head>
<body>
<span class="sel-one">
<select class="one-1">
 
</select>
</span>
<span class="sel-two">
</span>
</body>
</html>

选择省之后，关联出省所有的市，我们做的三级，就应该在二级市的选中后关联出县，没有的如北京不弹出

我们知道，我们的二级select是js添加，俗称脚本添加，这样的元素不能和一级select一样监听事件，要用过

delegate去处理，我们为了合理处理，修改如下：

1.数组市加入“请选择”

2.给脚本添加的二级select添加事件测试

3.添加三级select容器

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jq插件简单开发</title>
<script type="text/javascript" src="js/jquery-1.10.2.js"></script>
<script type="text/javascript">
$(function(){
//start 
 var onearr=[["请选择",[]],["河北省",["请选择","唐山市","石家庄"]],["河南省",["请选择","郑州市","开封市","洛阳市","平顶山市"]],["吉林省",["请选择","长春市","四平市","白山市"]],["北京市",["请选择","朝阳区"]]];
 $.each(onearr,function(i,ele){
  $(".one-1").append('<option>'+onearr[i][0]+'</option>')
 });
  
 $(".one-1").change(function(){
  var relval=$(this).val();
  $.each(onearr,function(i,ele){
   if(onearr[i][0]==relval){
    if(onearr[i][1].length==0){
     $(".sel-two").children().remove();
    }else{
     $(".sel-two").children().remove();
     var twosel=$('<select class="two-1"></select>')
     $(".sel-two").append(twosel);
     $.each(onearr[i][1],function(j,ele){
      twosel.append('<option>'+onearr[i][1][j]+'</option>')
     });
    };     
    
   }
  });
  
 });
 $(".sel-two").delegate(".two-1","change",function(){
  alert("未来元素或者脚本添加元素监听事件")
 });
 
//end
});
</script>
<style type="text/css">
*{ padding:0; margin:0}
html,body{ height: 100%; width: 100%; position: relative;}
</style>
</head>
<body>
<span class="sel-one">
<select class="one-1">
 
</select>
</span>
<span class="sel-two">
</span>
<span class="sel-three">
</span>
</body>
</html>

我们浏览页面，弹出二级下拉，选择选项出现了提示，提示部分就是我们三级弹出的代码位置

引导：

1.我们已经处理了一级，二级会补充数组，在增加一层数据结构

2.事件处理

我们对代码做二级处理就可以了，复制一级事件代码内容到二级事件内部，通过数组遍历和判断，

完整代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jq插件简单开发</title>
<script type="text/javascript" src="js/jquery-1.10.2.js"></script>
<script type="text/javascript">
$(function(){
//start 
 var onearr=
 [
   ["请选择",[]],
   ["河北省",
    [["请选择",[]],
  ["唐山市",["玉田县","丰润县"]],
  ["石家庄",["穷死县","穷县"]]]],
   ["河南省",
    [["请选择",[]],
  ["郑州市",["1县"]],
  ["开封市",[99]],
  ["洛阳市",[]],
  ["平顶山市",[]]]],
   ["吉林省",
    [["请选择",[]],
  ["长春市",[]],
  ["四平市",[]],
  ["白山市",[]]]],
   ["北京市",
    [["请选择",[]],
  ["朝阳区",[]]]]
 ];
 $.each(onearr,function(i,ele){
  $(".one-1").append('<option>'+onearr[i][0]+'</option>')
 });
 var twoindex=-1; 
 $(".one-1").change(function(){
  var relval=$(this).val();
  $.each(onearr,function(i,ele){
   if(onearr[i][0]==relval){
    if(onearr[i][1].length==0){
     $(".sel-two").children().remove();
     $(".sel-three").children().remove();
    }else{
     twoindex=i;
     $(".sel-two").children().remove();
     $(".sel-three").children().remove();
     var twosel=$('<select class="two-1"></select>')
     $(".sel-two").append(twosel);
     $.each(onearr[i][1],function(j,ele){
      twosel.append('<option>'+onearr[i][1][j][0]+'</option>')
     });
    };     
    
   }
  });
  
 });
 $(".sel-two").delegate(".two-1","change",function(){
  var tworelval=$(this).val();
  $.each(onearr[twoindex][1],function(i,ele){
   if(onearr[twoindex][1][i][0]==tworelval){
    if(onearr[twoindex][1][i][1].length==0){
     $(".sel-three").children().remove();
    }else{
     $(".sel-three").children().remove();
     var threesel=$('<select class="three-1"></select>')
     $(".sel-three").append(threesel);
     $.each(onearr[twoindex][1][i][1],function(j,ele){
      threesel.append('<option>'+onearr[twoindex][1][i][1][j]+'</option>')
     });
    };     
    
   }
  });
 });
 
//end
});
</script>
<style type="text/css">
*{ padding:0; margin:0}
html,body{ height: 100%; width: 100%; position: relative;}
</style>
</head>
<body>
<span class="sel-one">
<select class="one-1">
 
</select>
</span>
<span class="sel-two">
</span>
<span class="sel-three">
</span>
</body>
</html>

四、简繁体转换

var onearr=
[
["请选择",[]],
["河北省",
[["请选择",[]],
["唐山市",["玉田县","丰润县"]],
["石家庄",["穷死县","穷县"]]]],
["河南省",
[["请选择",[]],
["郑州市",["1县"]],
["开封市",[99]],
["洛阳市",[]],
["平顶山市",[]]]],
["吉林省",
[["请选择",[]],
["长春市",[]],
["四平市",[]],
["白山市",[]]]],
["北京市",
[["请选择",[]],
["朝阳区",[]]]]
];

我们搭建关联多维数组，利用这种数据结构，实现了联动，其实这算是比较复杂了，这种结构可以变化的，多级联动的结构有很多，可以采用更加直观，处理简单的结构，这样的算是一种很容易理解的结构创建！！！

简繁体转换是什么？就是把你写的正常文字（一般都是简体，有人奇葩），转为过去人用的文字。

实现就是:

转 ->轉

换-> 換

引导：

1.首先的有客户输入文字区域，那就是多行文本框就行，

2.js获取所有文字（这时候是一堆字符串）

3.从头到后遍历一次，转换？？？

这时候如果我们的js中有这样类型提供好的数据的话：

[['转','轉'],['换','換']];

我们把客户字符串遍历与数组每一项的第一个值作对比，相等把当前值改为这一项的第二个值就实现转换了

我们就用这只有2个字的做处理，代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jq插件简单开发</title>
<script type="text/javascript" src="js/jquery-1.10.2.js"></script>
<script type="text/javascript">
$(function(){
//start 
var jfchange=[['转','轉'],['换','換']];
$("#btn").click(function(){
 var str=$("#jfchange").val();
 var arrstr=str.split("");
 var len=arrstr.length;
 if($("#btn").html()=="转为繁体"){
  $.each(arrstr,function(i,e){
   $.each(jfchange,function(j,e){
    if(jfchange[j][0]==arrstr[i]){
     arrstr[i]=jfchange[j][1];
    }else{
     arrstr[i]=arrstr[i];
    };
   });
  });
  $("#jfchange").val(arrstr.join(""));
  $("#btn").html("转为简体");
 }else{
  $.each(arrstr,function(i,e){
   $.each(jfchange,function(j,e){
    if(jfchange[j][1]==arrstr[i]){
     arrstr[i]=jfchange[j][0];
    }else{
     arrstr[i]=arrstr[i];
    };
   });
  });  
  $("#jfchange").val(arrstr.join(""));
  $("#btn").html("转为繁体");
 };
 
 
});
//end
});
</script>
<style type="text/css">
*{ padding:0; margin:0}
html,body{ height: 100%; width: 100%; position: relative;}

</style>
</head>
<body>
<textarea id="jfchange" style="width:500px; height:200px; border:1px solid #000;">
</textarea>
<button id="btn">转为繁体</button>
</body>
</html>

我们可以扩展简繁体的参考数据，这样就可以把更多文字转换了

这时候我们还可以想到一个相似效果，“汉字注音”。

五、简单答题处理

非常简单的处理，每次只显示一道题，选择结果后跳到下一道，答题完显示提交按钮，最后输出个统计

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jq插件简单开发</title>
<script type="text/javascript" src="js/jquery-1.10.2.js"></script>
<script type="text/javascript">
$(function(){
//start 
var ok=['a','b','c','a','a'];
var rel=[];
$(".dd").find("input").change(function(){
 rel.push($(this).val());
 var obj=$(this);
 setTimeout(function(){
  obj.parent().parent().parent().hide().next().show();
 },400);
 
});
$("#ok").click(function(){
 var count=0;
 $.each(rel,function(i,e){
  if(rel[i]==ok[i]){
   count+=1;
  }
 });
 alert("正确个数是"+count+"个")
})
//end
});
</script>
<style type="text/css">
*{ padding:0; margin:0}
html,body{ height: 100%; width: 100%; position: relative;}

</style>
</head>
<body>
 <ul>
     <li>
         <p>1题</p>
            <p class="dd">
             <label><input type="radio" value="a"/>1</label>
                <label><input type="radio" value="b"/>2</label>
                <label><input type="radio" value="c"/>3</label>
            </p>
        </li>
        <li style="display:none">
         <p>2题</p>
            <p class="dd">
             <label><input type="radio" value="a"/>1</label>
                <label><input type="radio" value="b"/>2</label>
                <label><input type="radio" value="c"/>3</label>
            </p>
        </li>
        <li style="display:none">
            <p>3题</p>
            <p class="dd">
             <label><input type="radio" value="a"/>1</label>
                <label><input type="radio" value="b"/>2</label>
                <label><input type="radio" value="c"/>3</label>
            </p>
        </li>
        <li style="display:none">
            <p>4题</p>
            <p class="dd">
             <label><input type="radio" value="a"/>1</label>
                <label><input type="radio" value="b"/>2</label>
                <label><input type="radio" value="c"/>3</label>
            </p>
        </li>
        <li style="display:none">
            <p>5题</p>
            <p class="dd">
             <label><input type="radio" value="a"/>1</label>
                <label><input type="radio" value="b"/>2</label>
                <label><input type="radio" value="c"/>3</label>
            </p>
        </li>
        <li style="display:none"><button id="ok">提交</button></li>
    </ul>
</body>
</html>

六、创建课程表模板

一个课程表包含周和节次，创建模板就是创建周几到周几上课，有多少节次的表格

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jq插件简单开发</title>
<script type="text/javascript" src="js/jquery-1.10.2.js"></script>
<script type="text/javascript">
$(function(){
//start 
  var weekcc= ['星期一','星期二','星期三','星期四','星期五'];
  inittab(5,6,6,weekcc,4,2,0);
  $(".updatatab-two").find("select").change(function(){
   
   var am=zhuanInt($(".tabam").val());
   var pm=zhuanInt($(".tabpm").val());
   var ye=zhuanInt($(".tabye").val());   
   var rowb=parseInt(am)+parseInt(pm)+parseInt(ye);
   weekcc=[];
   $(".weekcon:checked").each(function(index) {
                weekcc.push($(this).siblings("span").html());
            });
   var colb=$(".weekcon:checked").length;
   $("#tablebox").remove();
   inittab(colb,rowb,rowb,weekcc,am,pm,ye);
   
  });
  $(".weekcon").click(function(){
   
   var am=zhuanInt($(".tabam").val());
   var pm=zhuanInt($(".tabpm").val());
   var ye=zhuanInt($(".tabye").val());   
   var rowb=parseInt(am)+parseInt(pm)+parseInt(ye);
   weekcc=[];
   $(".weekcon:checked").each(function(index) {
                weekcc.push($(this).siblings("span").html());
            });
   var colb=$(".weekcon:checked").length;
   $("#tablebox").remove();
   inittab(colb,rowb,rowb,weekcc,am,pm,ye);
   
  });
//end
});
 //fun+++调用的几个方法 ++++++++++++++++
 function inittab(colval,rowval,jieci,weekc,am,pm,ye){
  var tabc="<table width='100%' border='0' cellspacing='0' cellpadding='0' class='tablebox' id='tablebox'></table>";
  $("#tabgu").append(tabc);
  for(var i=0;i<rowval+1;i++){   
   var trc="<tr></tr>";
   $("#tablebox").append(trc)  
  };
  for(var j=0;j<colval+1;j++){ 
   var tdc="<td></td>";     
   $("#tablebox").find("tr").append(tdc); 
  };
  for(ii=1;ii<=jieci;ii++){
   $("#tablebox").find("tr").eq(ii).find("td").eq(0).html("第"+ii+"节");
  };
  for(jj=1;jj<=weekc.length;jj++){
   $("#tablebox").find("tr").eq(0).find("td").eq(jj).html(weekc[jj-1]);
  };
  for(var i1=1;i1<=am;i1++){
   $("#tablebox").find("tr").eq(i1).addClass("am");
  };
  var i2val1=parseInt(am)+1;
  var i2val2=parseInt(am)+parseInt(pm);
  for(var i2=i2val1;i2<=i2val2;i2++){
   $("#tablebox").find("tr").eq(i2).addClass("pm");
  };
  var i3val1=parseInt(am)+1+parseInt(pm);
  var i3val2=parseInt(am)+parseInt(pm)+parseInt(ye);
  for(var i3=i3val1;i3<=i3val2;i3++){
   $("#tablebox").find("tr").eq(i3).addClass("ye");
  };
    
 };
 function zhuanInt(yuanval){
  if(yuanval=="不上课"){
   return 0;
  }else{
   return yuanval;
  }
 };
 //fun end
</script>
<style type="text/css">
*{ padding:0; margin:0}
html,body{ height: 100%; width: 100%; position: relative;}
.wrapper{ width:1200px; margin:0 auto;}
.updatatab{ float:left; width:200px; background:#CCC;}
.tabcon{ float:left; width:800px;}
.tablebox{ border-collapse:collapse;}
.tablebox td{ border:1px solid #666; padding:20px;}
.updatatab-one label,.updatatab-two label{ display:block; margin:10px 5px;}
.am{ background:#fbf5e2;}
.pm{ background:#eef0f0;}
.ye{ background:#f8f7f4;}
</style>
</head>
<body>
<div class="wrapper">
 <div class="updatatab">
     <div class="updatatab-one">
         <label><input type="checkbox" checked="checked" class="weekcon" /><span>星期一</span></label>
            <label><input type="checkbox" checked="checked" class="weekcon" /><span>星期二</span></label>
            <label><input type="checkbox" checked="checked" class="weekcon" /><span>星期三</span></label>
            <label><input type="checkbox" checked="checked" class="weekcon" /><span>星期四</span></label>
            <label><input type="checkbox" checked="checked" class="weekcon" /><span>星期五</span></label>
            <label><input type="checkbox" class="weekcon" /><span>星期六</span></label>
            <label><input type="checkbox" class="weekcon" /><span>星期日</span></label>
        </div> 
        <div class="updatatab-two">
         <label>上午<select class="tabam">
                <option>不上课</option><option>1</option>
                <option>2</option><option>3</option>
                <option selected="selected">4</option>
                <option>5</option><option>6</option>
            </select>
            </label>
            <label>下午<select class="tabpm">
            <option>不上课</option><option>1</option>
                <option selected="selected">2</option>
                <option>3</option>
                <option>4</option>
                <option>5</option>
                <option>6</option>
            </select>
            </label>
            <label>晚上<select class="tabye">
                <option>不上课</option>
                <option>1</option>
                <option>2</option>
                <option>3</option>
                <option>4</option>
                <option>5</option>
                <option>6</option>
            </select></label>
         
        </div>
    </div>                             
 <div class="tabcon" id="tabgu">
  
 </div>           
</div> 
</body>
</html>

转载于:https://my.oschina.net/tbd/blog/508067