模仿电影选座，jq实现教室座位生成和学员座位安排

 

实现所需技术，html ，css ，js，jq ，ajax

 

废话不多说直接上图

这里是生成座位信息样式的地方

 

 

点击下一步

 

 

右击座位弹出选择器

 

 

好了大概的效果就是这样

html 代码 生成座位表按钮代码

<div class="form-group" compcode="formgroup" style="text-align: center">


                        <a class="btn btn-primary btn-large" id="btn" href="javascript:void(0);"
                           onclick="generateSeat();"><i class="icon-comment icon-white"></i>生成座位表</a>
                        <input id="hiddenButten" value="0" type="hidden">
                        <hr>
                    </div>
                    <div class="cardivone" style="margin: auto"></div>

生成座位js，过道功能暂时还没想到怎么弄，就先这样

document.oncontextmenu = function () {
                    return false; //这个是用来去掉这个页面的右键点击事件
                }

function generateSeat(type) {
                    let CLASSROOM_COL = $("input[name='CLASSROOM_COL']").val();
                    let CLASSROOM_ROW = $("input[name='CLASSROOM_ROW']").val();
                    if (CLASSROOM_COL.length > 0 && CLASSROOM_ROW.length > 0 && CLASSROOM_ROW!="0"&& CLASSROOM_COL!="0") {
                        $("#hiddenButten").val("1");
                        //单层车辆生成车辆图
                        $(".cardivone").html(""); //生成座位前先清空
                        /*$(".toptext").css('height','0px');*/
                        $(".cardivone").css('opacity', '1');
                        var lienumber = parseInt(CLASSROOM_COL) * 63 + 31 + "px";
                        $(".cardivone").css('width', lienumber);
                        var zhongnumber = parseInt(CLASSROOM_COL) * parseInt(CLASSROOM_ROW);
                        for (var i = 1; i <= zhongnumber; i++) {
                           /* $(".cardivone").append("<div class='caridzuowei' id='carid" + i + "' ><p οnmοusedοwn='whichButton(event," + i + "," + 1 + ")'>" + i + "</p></div>");
                            */$(".cardivone").append("<div class='caridzuowei' id='carid" + i + "' ><p>" + i + "</p></div>");
                        }
                        setTimeout(function () {
                            chuanzuo(type);
                        }, 100);
                        whichButton(); //判断点击是哪一个按钮
                    } else {
                        parent.layer.alert("行列不能为空！", {icon: 2, resize: false});
                    }
                }

                function chuanzuo(type) {

                    $(".caridzuowei").css("height", "45px");

                    $(".caridzuowei").addClass("zhngjian");
                    $(".caridzuowei p").css("line-height", "45px");
                    if(type){
                        var guodaone = "${classroom.CLASSROOM_GUODAO}".split(",")
                        for(var w = 0; w <= guodaone.length; w++){  //过道
                            $("#carid" + guodaone[w]).removeClass("zhngjian");
                            $("#carid"+guodaone[w]).addClass("guodao");
                        }
                    }else{
                        $(".caridzuowei").css("height", "45px");
                        $(".caridzuowei").addClass("zhngjian");
                        $(".caridzuowei p").css("line-height", "45px");
                    }


                }


                function whichButton(event, i, r) {
   //判断点击是哪一个按钮


                        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");
                            }
                        }

                }

 

我贴出部分css代码

.guodao { /*点击左键设置为过道*/
            background-color: #fff;
        }

        .zhngjian { /*点击右键恢复为座位*/
            background-color: #35a042;
        }

        .youren {
   
            background-color: red;
        }

        /*座位样式*/
        .caridzuowei{
   
            float: left;
            height: 50px;
            width: 50px;
            text-align: center;
            margin: 6px;
            border-radius:13px;
            z-index: 2;
        } /*座位样式*/
        .seatidzuowei{
   
            float: left;
            height: 50px;
            width: 50px;
            text-align: center;
            margin: 6px;
            border-radius:13px;
            z-index: 2;
        }
        .seatidzuowei p{
   
            font-family: 'Source Sans Pro', 'Helvetica Neue', 微软雅黑, Helvetica, Arial, sans-serif;
            color:black;
            font-size: 14px ;
        }
        .caridzuowei p{
   
            font-fam