Javascript 将生成的div分组到其他生成的div

我的意思是用循环创建的div。有从这样一个函数创建的“table”div和从另一个函数创建的“chair”div。所有桌子都有

id

元素，所有椅子都有

class

元素。桌子div的数量是不固定的，但是椅子的数量是并且应该始终是桌子数量的6倍；每张桌子的顶部和底部各有6把椅子

这段代码创建表

for (var i = 0; i < defaultSettings.numberofTables; i++) {
        newTable = $('<div id="table' + i + '"></div').css({
            'width': defaultSettings.tableSize.tableW + '%',
            'height': defaultSettings.tableSize.tableH + '%',
            'background-color': 'black'
        });
        tableProp = {
            'left': defaultSettings.tablePos.posX,
            'top': defaultSettings.tablePos.posY,
            'position': 'absolute',
            'display': 'none'
        };
            defaultSettings.tablePos.posX += 200;
        newTable.css(tableProp).appendTo('body').fadeIn(defaultSettings.speed);
        availableTables.push(newTable);
    }
    return availableTables;
}

for（var i=0；inewTable=$（'我将桌子和椅子分组。也标记了可用的桌子

    <button id="check">Check</button>


    <script>

        $( document ).ready(function() {
    makeFloorPlan();

    function makeFloorPlan() {
        var defaultSettings = {
                numberofTables: 5, //5 tables 
                tablePos: {
                        posX: 100,
                        posY: 100
                },
                tableSize: {
                        tableW: 10,
                        tableH: 12
                },
                takenTables: [2, 4], //
                numberofChairs: 30,
                chairPos: {
                        posX: 20,
                        posY: 80
                },
                chairSize: {
                        chairW: 1,
                        chairH: 2
                },
                speed: 1000 // tables fade in
        };

        function createAvailTables() {
    var availableTables = [],
        newTable, tableProp;
    for (var i = 0; i < defaultSettings.numberofTables; i++) {
        newTable = $('<div id="table' + i + '"></div').css({
            'width': defaultSettings.tableSize.tableW + '%',
            'height': defaultSettings.tableSize.tableH + '%',
            'background-color': 'black'
        });
        tableProp = {
            'left': defaultSettings.tablePos.posX,
            'top': defaultSettings.tablePos.posY,
            'position': 'absolute',
            'display': 'none'
        };

                    //create chairs for the table

                        var availableChairs = [],
                        newChair, chairProp;
                        var horPosArr = new Array(0, 50, 100);
                        var chairPosX, chairPosY; 
                        for (var j = 0; j < 6; j++) {                             

                            if(j<3) {
                                chairPosX = defaultSettings.tablePos.posX + horPosArr[j];
                                chairPosY = defaultSettings.tablePos.posY - 20;
                                //console.log("chair" + chairPosX + "," + chairPosY);                                    
                            }
                            else {
                                chairPosX = defaultSettings.tablePos.posX + horPosArr[j-3];
                                chairPosY = defaultSettings.tablePos.posY + 100;
                                //console.log("chair" + chairPosX + "," + chairPosY);                                    
                            }                                
                                newChair = $('<div class="table' + i + 'chair' + j + '"></div').css({
                                        'width': defaultSettings.chairSize.chairW + '%',
                                        'height': defaultSettings.chairSize.chairH + '%',
                                        'background-color': 'green'
                                });
                                chairProp = {
                                        'left': chairPosX,
                                        'top': chairPosY,
                                        'position': 'absolute',
                                        'display': 'none'
                                };

                                newChair.css(chairProp).appendTo('body').fadeIn(defaultSettings.speed);
                                availableChairs.push(newChair);
                        }


        if (defaultSettings.tablePos.posX >= 400) {
            defaultSettings.tablePos.posX = 100;
            defaultSettings.tablePos.posY += 200;
        } else {
            defaultSettings.tablePos.posX += 200;
        }                        

        newTable.css(tableProp).appendTo('body').fadeIn(defaultSettings.speed);
        availableTables.push(newTable);

    }
            //console.log(availableTables);
    return availableTables;                
        }

        var availableTables = createAvailTables();

        $("#check").click(function() {
                for (var i = 0; i < defaultSettings.takenTables.length; i++) {
                    console.log(defaultSettings.takenTables[i]);
                    $("#table"+defaultSettings.takenTables[i] ).fadeTo( defaultSettings.speed, 0.33 );
                }
        });


        }

检查
$（文档）.ready（函数（）{
makeFloorPlan（）；
函数makeFloorPlan（）{
var defaultSettings={
numberofTables:5，//5个表
表位置：{
posX:100，
波西：100
},
表大小：{
表W:10，
表H:12
},
可接受项：[2,4]//
主席数目：30，
主席职位：{
posX:20，
波西：80
},
椅子尺寸：{
主持人:1,，
主席：2
},
速度：1000//tables淡入
};
函数createAvailTables（）{
var availableTables=[]，
newTable，tableProp；
对于（var i=0；inewTable=$（'你做到了，谢谢。你没有关闭
$（文档）。准备好了
，但我想出来了。如何让该示例中的所有30个座位都有不同的座位类别？你给了每个单独的座位数组相同的类别。我编辑了答案-给每个椅子一个类，如-table1chair1、table1chair2等。。