在一张桌子周围包裹一行一行

Question

所以我已经在JS中使用DOMS制作了一个表，它是这样的：

function drawLevel() {
        document.getElementById("playGame").style.display="none";
        let table = document.createElement('table');
        table.id = "board"; // give the table an id

        document.getElementById('tableLevel').innerHTML= ""; 
        board = JSON.parse(levelPull[levelTracker].jsonData);
        for (let i = 0; i < size-1; i++) {
            let tr = document.createElement('tr');
           //just want one row
            let tro = document.createElement('tro');
            for (let j = 0; j < size-1; j++) {
                //makes a copy of the square 
                let td = document.createElement('td');
                td.innerHTML = 'x'; // just to make the table show
    
                //for outside table again here
                let tdo = document.createElement('tdo');
                tdo.innerHTML = 'M'
                //only create a certain row amount of it, it will stop appending children to this tale after it has made that one row
                if (j <size-1 && i <size-1){
                    tro.appendChild(tdo);
                }
                //to be able to pass the square coords into it 
                td.onclick= function(){
                    squareClick(this,i,j);
                }
    
                tr.appendChild(td); // append the the tr instead
                td.style.border = '1px solid red';
                //cell padding in the grid
                td.width = '100px';
                td.height = '100px';
            }
            
            table.align = "center";
            table.appendChild(tr);
            //append the outside table
            outsideTable.appendChild(tro);
            //I think I should call the color funct in func.js at this point for user to choose a color
            table.style.backgroundColor = 'black';
        }
    
    document.getElementById('tableLevel').appendChild(table);
    //trying to append this outside table again
    document.getElementById('tableLevel').appendChild(outsideTable);

    //styling table 
    table.style.border = '1px solid black';  
    table.style.borderCollapse = 'collapse';

    //styling outside table
    outsideTable.style.border = '10px solid green';
    outsideTable.style.borderCollapse= 'collapse';

    //trying to connect the div to match the CSS styling BS
    wrapper.style = "lineArray";
    //just need to do this around the first trs and first tds
    //tr.wrapper; 
    //td.wrapper;

    timer();
}

我试图在表格周围只插入一行和一列，但是我很难做到这一点。谁能帮我这个？ 如果您仍然想知道我在这里想要做什么，可以使用这张图片来帮助您： Question in Drawing Format 谢谢！