javascript-无法统一显示网格

javascript-无法统一显示网格,第1张

概述我想基于输入的2维生成网格,然后提供一种通过发送对象来更新网格单元的方法:updateCell = {index1,index2,value}当我使用以下代码时,未相应设置单元格的:grid-column属性,grid-row属性.function getCellId(row, col) { var name = 'cell_' + row + '

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

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

function getCellID(row,col) {    var name = "cell_" +  row + "_" +  col ;    return name;}//entrypointfunction 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  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;}
总结

以上是内存溢出为你收集整理的javascript-无法统显示网格 全部内容,希望文章能够帮你解决javascript-无法统一显示网格 所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错,欢迎将内存溢出网站推荐给程序员好友。

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/web/1105293.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2022-05-28
下一篇 2022-05-28

发表评论

登录后才能评论

评论列表(0条)

保存