我想根据作为输入给出的 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设置 style 时的细胞。
我用 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;
}
关于javascript - 不能统一显示网格，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54839156/