javascript-无法统一显示网格

我想基于输入的2维生成网格,然后提供一种通过发送对象来更新网格单元的方法：
updateCell = {index1,index2,value}

当我使用以下代码时,未相应设置单元格的：grid-column属性,grid-row属性.

function getCellId(row,col) {
    var name = "cell_" +  row + "_" +  col ;
    return name;
}

//entrypoint
function initGrid(rowSize,colSize) {
    var grid = document.getElementById("mygrid");
    for (i = 0; i < rowSize; i++) {
        for (j = 0; j < colSize; j++) {
            var data = {
                rowSize: rowSize,colSize: colSize,row: i,col: j
            };
            var cell = initCell(data);
            grid.appendChild(cell);
        }
    }

}
function initCell(data) {

    var cell = document.createElement("div");
    cell.id = window.getCellId(data.row,data.col);
    cell.innerHTML = "NotComputed";


    cell.style["grid-column"] = data.row.toString() + "/" + data.rowSize.toString();
    cell.style["grid-row"] = data.col.toString() + "/" + data.colSize.toString();
    return cell; 
}

.grid-container{
    display: grid;
    grid-gap:10px;
}

<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet" type="text/css" href="grid.css" />
    <script src="grid.js"></script>
    <script>
        window.onload=function(){
            window.initGrid(2,2); //the 2 inputs
        }

    </script>
</head>
<body>
    <div class="grid-container" id="mygrid">

    </div>

</body>

</html>

最佳答案

问题是在设置单元格样式时,我使用的是grid-column和grid-row属性.

我通过使用grid-column-start,grid-column-end,grid-row-start,grid-row-end解决了它.

function initCell(data) {

    var cell = document.createElement("div");
    cell.id = window.getCellId(data.row,data.col);
    cell.innerHTML = "NotComputed";

    cell.style["grid-row-start"]=data.row;
    cell.style['grid-row-end']=data.row+1;
    cell.style['grid-column-start']=data.col;
    cell.style['grid-column-end']=data.col+1;

    return cell;

}

grid grid

javascript-无法统一显示网格

相关文章