JQ实现座位生成,座位位置保存。

JQ实现座位生成,座位位置保存。

实现所需的技术:html,css,JQ;

在做一个大巴车客运售票选座时遇到的问题,想要模仿类似电影院选座的功能,还需要可以新增不同车型的不同座位分布。

  1. 先来看看效果 ,这里是新增不同车型的不同座位分布;
    在这里插入图片描述
    在这里插入图片描述

这里是新增不同车型的不同座位分布
输入总排数和总列数后就能生成相对于的车辆当有遇到比如说“双层大巴车”(中国特色可不能少~)看下图在这里插入图片描述
选择双层后就能对应出现双层和单层一样输入总行数总列数生成~~

  1. 好啦简单的生成大概的车辆图已经解决了下面就该 指定座位类型 了,应该已经注意到了左下角写的鼠标点击不同的按钮就能指定不同的座位类型(本来想做个右键然后每个座位都能弹出一个小框框让用户选择的,但是感觉这样太麻烦了而且~~懒了一下下就这样做了感觉这样做用户操作也会更快)see down picture
    在这里插入图片描述呐就系这样!是不是操作无脑化!!这里做的时候注意禁用浏览器的右键事件
    document.oncontextmenu = function(){
    return false; //这个是用来去掉这个页面的右键点击事件
    }
    这里有个小问题~浏览器这个中键功能没法去掉啊!!去掉了左键也就扑街了…谁有好办法求留言

  2. 座位啥的都生成好了下面就要 保存 了来看看数据库
    在这里插入图片描述
    在这里插入图片描述 呐没用的就不看了就这些要保存的我保存了每个类型的座位上的数字编号,这样显示的时候把这些编号给剔出来绑上样式就搞定啦

  3. 到这里所有的新增部分就搞定啦下面看看怎么显示
    在这里插入图片描述
    这上面是双层
    在这里插入图片描述
    这里是单层~
    呐就这样!在这里点击左键就能够选择座位啦在这里插入图片描述
    选择到的座位就会变为绿色,已经售出的座位变成灰色。

下面是实现的代码

这里只写出实现主要功能的代码,一些类似与第一层与第二层的切换呀那些特效就不写了。

//这里有一个单双层的判断就是如果双层就显示一个第一层第二层的切换而已
           if(cheliangtype == 2){ //车辆层数判断
               if($("#zongpaione").val().length == 0 || $("#zongpaitwo").val().length == 0 || $("#zonglieone").val().length == 0 || $("#zonglietwo").val().length == 0){
                   alert("请输入车辆基本信息");
                   return;
               }
               else{ //双层车辆生成车辆图
                   $(".toptext").css('height','40px');
                   $(".cardivone").html(""); //生成座位前先清空(第一层)
                   $(".cardivtwo").html(""); //生成座位前先清空(第二层)
                   $(".cardivone").css('opacity','1');
                   var lienumber = parseInt($("#zonglieone").val())* 55 + 26 +"px";
                   var shuangnumb= parseInt($("#zonglietwo").val())* 55 + 26 +"px";
                   $(".cardivone").css('width',lienumber);
                   $(".cardivtwo").css('width',shuangnumb);
                   var zhongnumber = parseInt($("#zonglieone").val()) * parseInt($("#zongpaione").val());
                   var shuangnumber = parseInt($("#zongpaitwo").val()) * parseInt($("#zonglietwo").val());
                   for(var i = 1; i<=zhongnumber; i++){
                       $(".cardivone").append("<div class='caridzuowei' id='carid"+i+"' onmousedown='whichButton(event,"+i+","+1+")'><p>"+i+"</p></div>");
                   }
                   for(var i = 1; i<=shuangnumber; i++){
                       $(".cardivtwo").append("<div class='cariddier' id='cartwoid"+i+"' onmousedown='whichButton(event,"+i+","+2+")'><p>"+i+"</p></div>");
                   }
                   setTimeout(function (){ chuanzuo(); }, 100);
                   whichButton(); //判断点击是哪一个按钮
               }
           }
           else{
               if(cheliangtype == 1){
                if($("#zongpaione").val().length == 0 || $("#zonglieone").val().length == 0){
                    alert("请输入车辆基本信息");
                    return;
                }
                else{ //单层车辆生成车辆图
                    $(".cardivone").html(""); //生成座位前先清空
                    $(".toptext").css('height','0px');
                    $(".cardivone").css('opacity','1');
                    var lienumber = parseInt($("#zonglieone").val())* 55 + 26 +"px";
                    $(".cardivone").css('width',lienumber);
                    var zhongnumber = parseInt($("#zonglieone").val()) * parseInt($("#zongpaione").val());
                    for(var i = 1; i<=zhongnumber; i++){
                        $(".cardivone").append("<div class='caridzuowei' id='carid"+i+"' onmousedown='whichButton(event,"+i+","+1+")'><p>"+i+"</p></div>");
                    }
                    setTimeout(function (){ chuanzuo(); }, 100);
                    whichButton(); //判断点击是哪一个按钮
                }
               }
           }
           function chuanzuo(){
            if(weizhitype == 1){//如果是座位车
             $(".caridzuowei").css("height","45px");
             $(".cariddier").css("height","45px");
             $(".caridzuowei p").css("line-height","45px");
             $(".cariddier p").css("line-height","45px");
         }
         else{ //床车
             $(".caridzuowei").css("height","60px");
             $(".cariddier").css("height","60px");
             $(".caridzuowei p").css("line-height","60px");
             $(".cariddier p").css("line-height","60px");
         }
        }
        
        function whichButton(event,i,r){//判断点击是哪一个按钮
            if(r == 1){ //如果车辆层数等于1
                try{
                 var btnNum = event.button;  //这里如果是ie浏览器的话参数是不同的
             }
             catch(e){
                 return;
             }
             if(btnNum == 0 ){ //鼠标左键设置为过道
                $("#carid"+i).removeClass("zhngjian");
                $("#carid"+i).removeClass("youjian");
                $("#carid"+i).addClass("guodao");
             }
             else{
                 if(btnNum == 2 ){ //鼠标右键恢复为座位
                     $("#carid"+i).removeClass("guodao");
                     $("#carid"+i).removeClass("youjian");
                     $("#carid"+i).addClass("zhngjian");
              }
              else{
                  if(btnNum == 1 ){ //鼠标中键设置为司机位
                      var sijishu =  $("#carid"+i).parents(".cardivone").children(".youjian").length; //获取当前司机占了多少
                      var sijitwo =  $("#cartwoid"+i).parents(".cardivtwo").children(".youjian").length; //获取当前司机占了多少
                      if(sijishu + sijitwo >= 3){
                          alert("您已经选择了足够多的司机位");
                      }
                      else{
                          $("#carid"+i).removeClass("guodao");
                             $("#carid"+i).removeClass("zhngjian");
                          $("#carid"+i).addClass("youjian");
                      }
               }
               else{
                   alert("无法获取您点击的按钮请勿使用IE浏览器");
                   return;
               }
              }
             }
             var guodaonum = $("#carid"+i).parents(".cardivone").children(".guodao").length; //获取当前过道占了多少
             var sijishu =  $("#carid"+i).parents(".cardivone").children(".youjian").length; //获取当前司机占了多少
             var guodaotwo = $("#cartwoid"+i).parents(".cardivtwo").children(".guodao").length; //获取当前过道占了多少
             var sijitwo =  $("#cartwoid"+i).parents(".cardivtwo").children(".youjian").length; //获取当前司机占了多少
             var zhngzhu = $("#carid"+i).parents(".cardivone").children("div").length; //获取总数(懒得传递了)
             var zhngtwo = $("#cartwoid"+i).parents(".cardivtwo").children("div").length; //获取总数(懒得传递了)
             $(".zuweizhuangt p").text(zhngzhu + zhngtwo - guodaonum - sijishu - guodaotwo - sijitwo); //把总数赋值上去
            }
            else{
             try{
                 var btnNum = event.button;  //这里如果是ie浏览器的话参数是不同的
             }
             catch(e){
                 return;
             }
             if(btnNum == 0 ){ //鼠标左键设置为过道
                $("#cartwoid"+i).removeClass("zhngjian");
                $("#cartwoid"+i).removeClass("youjian");
                $("#cartwoid"+i).addClass("guodao");
             }
             else{
                 if(btnNum == 2 ){ //鼠标右键恢复为座位
                     $("#cartwoid"+i).removeClass("guodao");
                     $("#cartwoid"+i).removeClass("youjian");
                     $("#cartwoid"+i).addClass("zhngjian");
              }
              else{
                  if(btnNum == 1 ){ //鼠标中键设置为司机位
                      var sijishu =  $("#carid"+i).parents(".cardivone").children(".youjian").length; //获取当前司机占了多少
                      var sijitwo =  $("#cartwoid"+i).parents(".cardivtwo").children(".youjian").length; //获取当前司机占了多少
                      if(sijishu + sijitwo >= 3){
                          alert("您已经选择了足够多的司机位");
                      }
                      else{
                          $("#cartwoid"+i).removeClass("guodao");
                             $("#cartwoid"+i).removeClass("zhngjian");
                          $("#cartwoid"+i).addClass("youjian");
                      }
               }
               else{ //IE浏览器的鼠标按钮所代表的数字是不同的!!!要注意这个!!
                   alert("无法获取您点击的按钮请勿使用IE浏览器")
                   return;
               }
              }
             }
             var guodaonum = $("#carid"+i).parents(".cardivone").children(".guodao").length; //获取当前过道占了多少
             var sijishu =  $("#carid"+i).parents(".cardivone").children(".youjian").length; //获取当前司机占了多少
             var guodaotwo = $("#cartwoid"+i).parents(".cardivtwo").children(".guodao").length; //获取当前过道占了多少
             var sijitwo =  $("#cartwoid"+i).parents(".cardivtwo").children(".youjian").length; //获取当前司机占了多少
             var zhngzhu = $("#carid"+i).parents(".cardivone").children("div").length; //获取总数(懒得传递了)
             var zhngtwo = $("#cartwoid"+i).parents(".cardivtwo").children("div").length; //获取总数(懒得传递了)
             $(".zuweizhuangt p").text(zhngzhu + zhngtwo - guodaonum - sijishu - guodaotwo - sijitwo); //把总数赋值上去
            }
        }

上面这些JS就是主要实现的代码,下面会列出部分使用的CSS and html


/*这里绝对不是全部的css 这里只是鼠标左右键点击的时候加上去的不同类型的class*/
  .guodao{ /*点击左键设置为过道*/
      background-color:#fff;
  }
  .zhngjian{ /*点击右键恢复为座位*/
      background-color:#D1F0FF;
  }
  .youjian{  /*点击中键设置为司机*/
      background-color:#FFB49C;
  }

这里绝对不是全部的css 这里只是鼠标左右键点击的时候加上去的不同类型的class ……ps:不是因为懒不写~是其他的都是写简单的样式特效

<div class="myCheXing">
     <div class="chexingContent">
         <div class="closediv" onclick="yonclose()"><a class="hvr-radial-in button" onmouseover="yonjr1()" onmouseout="yonlk1()" >×</a></div>
         <div class="closecloseleft">
             <div class="row"><div class="col-lg-4 col-md-4 col-sm-4 col-xs-4 selecftext"><p>车型名称</p></div><div class="col-lg-8 col-md-8 col-sm-8 col-xs-8"><input id="shuruname" type="text" class="carname" maxlength="8"/></div></div>
             <div class="row"><div class="col-lg-4 col-md-4 col-sm-4 col-xs-4 selecftext"><p>车型代码</p></div><div class="col-lg-8 col-md-8 col-sm-8 col-xs-8"><input id="bianxiang" type="text" class="carname" maxlength="5"  onblur="bianxiang(this.id)"/></div></div>
             <div class="row"><div class="col-lg-4 col-md-4 col-sm-4 col-xs-4 selecftext"><p>位置类型</p></div><div class="col-lg-8 col-md-8 col-sm-8 col-xs-8">
                 <div class="singleselection">
                     <div class="zcitherdiv"></div>
                     <div class="zwfloatdiv" onclick="zwfloatdiv()"><p>座 位</p></div>
                     <div class="cwfloatdiv" onclick="cwfloatdiv()"><p>床 位</p></div>
                 </div>
             </div></div>
             <div class="row"><div class="col-lg-4 col-md-4 col-sm-4 col-xs-4 selecftext"><p>车型层数</p></div><div class="col-lg-8 col-md-8 col-sm-8 col-xs-8">
                 <div class="singleselection">
                     <div class="slitherdiv"></div>
                     <div class="lsfloatdiv" onclick="lsfloatdiv()"><p>单 层</p></div>
                     <div class="rifloatdiv" onclick="rifloatdiv()"><p>双 层</p></div>
                 </div>
             </div></div>
             <div class="row"><div class="col-lg-4 col-md-4 col-sm-4 col-xs-4 selecftext zhpngpainumb"><p>总 排 数</p></div>
                 <div class="col-lg-8 col-md-8 col-sm-8 col-xs-8 paishiumb">
                     <input type="text" class="carname carnamboot" id="zongpaione" placeholder="第一层" maxlength="2" onblur="setnumb(this.id)"/>
                     <input type="text" class="carname carnamtop" id="zongpaitwo" placeholder="第二层" maxlength="2" onblur="setnumb(this.id)"/>
                 </div>
             </div>
             <div class="row"><div class="col-lg-4 col-md-4 col-sm-4 col-xs-4 selecftext zhpngpainumb"><p>总 列 数</p></div>
                 <div class="col-lg-8 col-md-8 col-sm-8 col-xs-8 paishiumb">
                     <input type="text" class="carname carnamboot" id="zonglieone"  placeholder="第一层" maxlength="1" onblur="setnumb(this.id)"/>
                     <input type="text" class="carname carnamtop" id="zonglietwo" placeholder="第二层" maxlength="1" onblur="setnumb(this.id)"/>
                 </div>
             </div>
             <div class="row butnrow"><button class="btn btn-info" onclick="btnshenchen()">生成车辆图</button></div>
             <div class="row textdivbc"><p>· 鼠标左键点击为过道</p></div>
             <div class="row textdivbc"><p>· 鼠标右键点击为撤回修改</p></div>
             <div class="row textdivbc"><p>· 鼠标中键点击为设置司机位</p></div>
             
         </div>
         <div class="closecloseright">
             <div class="toptext"> <!-- 顶部用来选择第一层还是第二层的东西 -->
                 <div class="leftoneceng" onclick="oncnoedyc()"><p>第一层</p></div>
                 <div class="righttwoceng" onclick="ontwodyc()"><p>第二层</p></div>
             </div>
             <div class="rightcircle">
                 <div class="zuweizhuangt" onmouseover="zuweizhuangt1()" onmouseout="zuweizhuangt2()" onclick="jinumzuowei()" title="座位数"><p>N</p></div>
                 <div class="baocun" onmouseover="baocun1()" onmouseout="baocun2()" onclick="baocuncartypr()" title="保存"><p class="glyphicon glyphicon-ok"></p></div>
             </div>
             <div class="cardivone"></div> <!-- 第一层 -->
             <div class="cardivtwo"></div> <!-- 第二层 -->
         </div>
     </div>
</div>

呐这里上面的就是后台的生成座位用的了(只是大概的)下面是前台的座位显示和选择,

–座位显示和选择–

<!--模态 选座-->
    <div class="xuanzuo">
        <div class="closediv" onclick="yonclose()"><a class="hvr-radial-in button" onmouseover="yonjr1()" onmouseout="yonlk1()" >×</a></div>
        <div class=""></div>
        <div class="qiehuanbian">
            <div class="zuweizhuangt" onmouseover="zuweizhuangt1()" onmouseout="zuweizhuangt2()" onclick="oncnoedyc()" title="第一层"><p>1</p></div>
         <div class="baocun" onmouseover="baocun1()" onmouseout="baocun2()" onclick="ontwodyc()" title="第二层"><p>2</p></div>
        </div>
        <div class="xuanzuozhuti">
            <div class="textbianxin"><p></p></div>
            <div class="cardivone"></div> <!-- 第一层 -->
         <div class="cardivtwo"></div> <!-- 第二层 -->
        </div>
    </div>
    <!-- end modal模态 选座 -->
//预警!!!代码写得有点点啰嗦,里面的查询就是查询出上面所写的数据库内容
        function XuanZuoAn(carname)  //点击了选座按钮
        {
            if (DCircuitid == 0) //线路信息不为空
            {
                alert("请先选择线路");
                return;
            }
            $("body").scrollTop("0"); //获取滚动条回到顶部
            $('.xuanzuo').css('display','block');
            $('.xuanzuo').css('height','100%');
            $('body').css('overflow','hidden');
            setTimeout(function (){ $('.xuanzuo').css('opacity', '1')}, 10);
            var timeintnow = $("#shijian").val(); //获取选中的日期
            $.ajax({
              url:"${ctx}/Dispatch/cartypename.do",
              data: {"Ineedmc":Dcartype},
              type:"post",
              dataType:"json",
              success:function(data){
                  if(data[0].carstorey == 1){  //单层
                      $(".textbianxin p").text("所选车辆:"+Dcartype+" 可乘坐"+data[0].maxzlke+" 当前第一层");
                      $('.qiehuanbian').css('display','none');
                      $(".cardivone").html(""); //生成座位前先清空
                   $(".toptext").css('height','0px');
                   $(".cardivone").css('opacity','1');
                   var lienumber = parseInt(data[0].firstlist)* 55 + 26 +"px";
                   $(".cardivone").css('width',lienumber);
                   var zhongnumber = parseInt(data[0].firstfloorrw) * parseInt(data[0].firstlist);
                   for(var i = 1; i<=zhongnumber; i++){
                       $(".cardivone").append("<div class='caridzuowei' id='carid"+i+"' onclick='whichButton("+i+","+1+")'><p>"+i+"</p></div>");
                   }
                   setTimeout(function (){ chuanzuo(data[0].seattypeid); }, 100);
                   var sijishuzuone =data[0].firstfloodriver.split(",");
                   var guodaone = data[0].firstfloogangway.split(",");
                   for(var w = 1; w <= sijishuzuone.length; w++){  //司机位
                       $("#carid"+sijishuzuone[w]).addClass("youjian");
                   }
                   for(var w = 1; w <= guodaone.length; w++){  //过道
                       $("#carid"+guodaone[w]).addClass("guodao");
                   }
                   whichButton(); //判断点击是哪一个按钮DCircuitid
                   var bianxinwd = data[0].firstfloorrw * data[0].firstlist
                   for(var y = 0; y<= bianxinwd; y++){
                   $.ajax({
                       url: "${ctx}/Booking/chaCheXing.do", //查询车辆ID
                       data: {"IneedID":DCircuitid},
                       type:"post",
                   dataType:"json",
                   success:function(da){
                       $.ajax({
                     url: "${ctx}/Booking/selectZuoWei.do", //获取两个站点
                     data: {"CaeID":da[0].carid,"RideTime":timeintnow,"ZuoWeiHao":y+" 第一层"},
                     type:"post",
                     dataType:"json",
                     success:function(data){
                      if (data[0] == ""||data[0] == null){ //如果查不到东西
                      }
                      else{
                          $("#carid"+y).addClass("yixuanzezw");
                      }
                    },
                error:function(r){
                }});
                  },
              error:function(r){
              }});
                   
               }
                  }
                  else{ //双层
                      $(".textbianxin p").text("所选车辆:"+Dcartype+" 可乘坐"+data[0].maxzlke+" 当前第一层");
                      $('.qiehuanbian').css('display','block');
                      setTimeout(function (){ $(".qiehuanbian").css('opacity', '1')}, 10);
                      $(".cardivone").html(""); //生成座位前先清空(第一层)
                   $(".cardivtwo").html(""); //生成座位前先清空(第二层)
                   $(".cardivone").css('opacity','1');
                   var lienumber = parseInt(data[0].firstlist)* 55 + 26 +"px";
                   var shuangnumb= parseInt(data[0].secondlist)* 55 + 26 +"px";
                   $(".cardivone").css('width',lienumber);
                   $(".cardivtwo").css('width',shuangnumb);
                   var zhongnumber = parseInt(data[0].firstfloorrw) * parseInt(data[0].firstlist);
                   var shuangnumber = parseInt(data[0].secondfloorrw) * parseInt(data[0].secondlist);
                   for(var i = 1; i<=zhongnumber; i++){
                       $(".cardivone").append("<div class='caridzuowei' id='carid"+i+"' onclick='whichButton("+i+","+1+")'><p>"+i+"</p></div>");
                   }
                   for(var i = 1; i<=shuangnumber; i++){
                       $(".cardivtwo").append("<div class='cariddier' id='cartwoid"+i+"' onclick='whichButton("+i+","+2+")'><p>"+i+"</p></div>");
                   }
                   setTimeout(function (){ chuanzuo(); }, 100);
                   var sijishuzuone =data[0].firstfloodriver.split(",");
                   var guodaone = data[0].firstfloogangway.split(",");
                   for(var w = 1; w <= sijishuzuone.length; w++){  //司机位
                       $("#carid"+sijishuzuone[w]).addClass("youjian");
                   }
                   for(var w = 1; w <= guodaone.length; w++){  //过道
                       $("#carid"+guodaone[w]).addClass("guodao");
                   }
                   var sijishuzutwo =data[0].secondfloordriver.split(",");
                   var guodatwo = data[0].secondfloorgangway.split(",");
                   for(var w = 1; w <= sijishuzutwo.length; w++){  //司机位
                       $("#cartwoid"+sijishuzutwo[w]).addClass("youjian");
                   }
                   for(var w = 1; w <= guodatwo.length; w++){  //过道
                       $("#cartwoid"+guodatwo[w]).addClass("guodao");
                   }
                   whichButton(); //判断点击是哪一个按钮
                   var bianxinwd = data[0].firstfloorrw * data[0].firstlist
                   for(var y = 0; y<= bianxinwd; y++){
                   $.ajax({
                       url: "${ctx}/Booking/chaCheXing.do", //查询车辆ID
                       data: {"IneedID":DCircuitid},
                       type:"post",
                   dataType:"json",
                   success:function(da){
                       $.ajax({
                     url: "${ctx}/Booking/selectZuoWei.do", //获取两个站点
                     data: {"CaeID":da[0].carid,"RideTime":timeintnow,"ZuoWeiHao":y+" 第一层"},
                     type:"post",
                     dataType:"json",
                     success:function(data){
                      if (data[0] == ""||data[0] == null){ //如果查不到东西
                      }
                      else{
                          $("#carid"+y).addClass("yixuanzezw");
                      }
                    },
                error:function(r){
                }});
                  },
              error:function(r){
              }});
                   
               }
               var biainwd = data[0].secondfloorrw * data[0].secondlist
               for(var y = 0; y<= biainwd; y++){
                   $.ajax({
                       url: "${ctx}/Booking/chaCheXing.do", //查询车辆ID
                       data: {"IneedID":DCircuitid},
                       type:"post",
                   dataType:"json",
                   success:function(da){
                       $.ajax({
                     url: "${ctx}/Booking/selectZuoWei.do", //获取两个站点
                     data: {"CaeID":da[0].carid,"RideTime":timeintnow,"ZuoWeiHao":y+" 第二层"},
                     type:"post",
                     dataType:"json",
                     success:function(data){
                      if (data[0] == ""||data[0] == null){ //如果查不到东西
                      }
                      else{
                          $("#cartwoid"+y).addClass("yixuanzezw");
                      }
                    },
                error:function(r){
                }});
                  },
              error:function(r){
              }});
                   
               }
                  }
              },
            error:function(er){
                return;
            }});
            
            var stdwr = $("#GPzuohao").val();
            if(stdwr.length >= 1){
                if(stdwr.indexOf("第一层") == -1){ //如果找不到第一层
                    re=new RegExp(" 第一层","g");
        ce = new RegExp(" 第二层","g");
        var newstart=stdwr.replace(re,"");
        newstart=newstart.replace(ce,"");
        $("#cartwoid15").css("background-color","#fff");
              $("#cartwoid"+ newstart).css("background-color","#00CC00");
                }
                else{
                    if(stdwr.indexOf("第二层") == -1){ //如果找不到第二层
                     re=new RegExp(" 第一层","g");
         ce = new RegExp(" 第二层","g");
         var newstart=stdwr.replace(re,"");
         newstart=newstart.replace(ce,"");
               $("#carid"+ newstart).css("background-color","#00CC00");
                 }
                 else{
                 }
                }
            }
            
            
        }
        //end选座按钮
        
        function whichButton(i,r){//判断点击是哪一个按钮
             if(r == 1){ //如果车辆层数等于1
                 if($("#carid"+i).attr("class").length > 11){
                     alert("您只能选择浅蓝色的座位");
                     return;
                 }
                 else{
                  if($("#GPzuohao").val().length > 0){
                   var str = $("#GPzuohao").val();
          re=new RegExp(" 第一层","g");
          ce = new RegExp(" 第二层","g");
          var newstart=str.replace(re,"");
          newstart=newstart.replace(ce,"");
                      $("#carid"+ newstart).css("background-color","#D1F0FF");
                      $("#cartwoid"+ newstart).css("background-color","#D1F0FF");
                      $("#carid"+i).css("background-color","#00CC00");
                      $("#GPzuohao").val(i+" 第一层");
                  }
                  else{
                      $("#carid"+i).css("background-color","#00CC00");
                      $("#GPzuohao").val(i+" 第一层");
                  }
                 }
             }
             else{ //当是双层的
                 try{
                  if($("#cartwoid"+i).attr("class").length > 11){
                      alert("您只能选择浅蓝色的座位");
                      return;
                  }
                  else{
                   if($("#GPzuohao").val().length > 0){
                    var str = $("#GPzuohao").val();
           re=new RegExp(" 第一层","g");
           ce = new RegExp(" 第二层","g");
           var newstart=str.replace(re,"");
           newstart=newstart.replace(ce,"");
                       $("#cartwoid"+ newstart).css("background-color","#D1F0FF");
                       $("#carid"+ newstart).css("background-color","#D1F0FF");
                       $("#cartwoid"+i).css("background-color","#00CC00");
                       $("#GPzuohao").val(i+" 第二层");
                   }
                   else{
                       $("#cartwoid"+i).css("background-color","#00CC00");
                       $("#GPzuohao").val(i+" 第二层");
                   }
                  }
                 }catch(e){
                 
                 }
             }
        }
        
     function chuanzuo(weizhitype){    //判断是床位车辆还是座位车辆
            if(weizhitype == 1){//如果是座位车
             $(".caridzuowei").css("height","45px");
             $(".cariddier").css("height","45px");
             $(".caridzuowei p").css("line-height","45px");
             $(".cariddier p").css("line-height","45px");
         }
         else{ //床车
             $(".caridzuowei").css("height","60px");
             $(".cariddier").css("height","60px");
             $(".caridzuowei p").css("line-height","60px");
             $(".cariddier p").css("line-height","60px");
         }
        }

代码写得有点点啰嗦,里面的查询就是查询出上面所写的数据库内容,我查出后给他分成了数组然后一个个变成相对应的座位类型,然后显示出来,选择到的座位就会变为绿色,已经售出的座位变成灰色。

评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值