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