如何在网格单元上方添加文本？

Question

这里是JS新手。我想用棋盘边缘旁边的数字和字母标记棋盘。但是，我找不到这样做的抽象方法。到目前为止，我只用颜色创建了棋盘（未显示）。

HTML：

<div id = 'gridcontainer'> 

</div>

Javascript：

function makeChessBoard(row, col)           //creates 64 cells
        {
            grid = document.getElementById('gridcontainer');
            grid.style.cssText = "grid-template-columns: repeat(" + col + ", 60px);

            cell = [];
            for (i = 0; i < (row * col); i++)
            {
                cell[i] = document.createElement('div');
                cell[i].className = 'cells';

                grid.appendChild(cell[i]);
            }
        }
makeChessBoard(8, 8);

CSS：

#gridcontainer
{
    display: grid;
    grid-gap: 0;
}

请，非常感谢您的帮助！

Answer 1

最好将单元阵列设为2d。您可以+1行和col并使用'if'将数字和字母放入其中。然后添加它们特殊的类。像这样。

     function makeChessBoard(row, col){           //creates 64 cells
 grid = document.getElementById('container');
 grid.style.cssText = "grid-template-columns: repeat(" + col + ", 60px)"
 const leters = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h']
 cell = [];
 for (i = 0; i < row+1; i++)
 { for(j=0; j < col+1; j++){
cell[i][j] = document.createElement('div');
cell[i][j].className = 'cells';
if(cel[i][col]){
this.innerText = leters[j]
}
if(cel[row][j]){
this.innerText = j+1
}
grid.appendChild(cell[i][j]);}}}