Question

我正在编写一个简单的javascript游戏，我有（不开心？）的想法使用一个大的html表来绘制游戏场景（“像素”是一个单元格）。

由于游戏必须在几个屏幕分辨率的主浏览器上工作，但“网格”大小（单元格数）始终相同，我想将表格宽度设置为页面宽度的百分比。此外，由于表很大（35 x 70），我动态生成它。这样一切都没问题，但每个表格单元格（显然）都是一个矩形，而不是正方形。

所以问题是：考虑到宽度在运行时已知，哪个是将每个<td>元素的高度设置为宽度的最佳方法？

这些是感兴趣的代码：

HTML ：

<body>
    ...
    <div id="container"></div>
    ...
</body>

的Javascript ：

$("#container").html(createGrid(gridX,gridY));

function createGrid(row,col){
    var table="<table id='grid'>\n";
    for(i=0; i<row; i++){
        table+="<tr>"

    for(j=0; j<col; j++)
        table+="<td></td>"

    table+="</tr>\n";
    }
    table+="</table>";

    return table;
}

CSS ：

#grid{
 position: relative;
 margin-left: auto ;
 margin-right: auto;
 border-collapse: collapse;
 width: 90%;
}

Answer 1

在你的功能中，你已经知道你有多少行，所以

var winWidth = $(window).innerWidth(); //your window width
var gridWidth = winWidth/row; // each row width size
var heightWidth = $('tr').height(gridWidth); // set height

可调整大小的表与平方单元格

1 个答案: