Question

我想基于输入的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>

Answer 1

问题是我在设置单元格的function reloadiframes() { var refreshCounter = window.sessionStorage.getItem("counter"); if (refreshCounter < 40) { refreshCounter++; window.sessionStorage.setItem("counter", refreshCounter); for (var i = 0; i < iframes.length; i++) { iframes[i].src = iframes[i].src ; } } else { clearInterval(intervalID); window.sessionStorage.clear(); } } windowOnInitialize()时使用了grid-column和grid-row属性。

我通过使用style，grid-column-start，grid-column-end，grid-row-start解决了这个问题。

grid-row-end

无法均匀显示网格

1 个答案: