1

我想创建一个编号的网格。用户输入数字并生成网格。我想用 CSS、HTML 或 Jquery Mobile 来做。这是一个 ipad 项目。我不知道如何解决这个问题。我想要以下结果： 自动生成的编号网格

就目前而言，我有一个在页面上重复网格图像的 div。我必须为每个背景重新生成一个图像。即：用户想要一个 40X60 英尺的区域，我必须生成一个 40X60 的图像。（网格上 100px=5 英尺）我更希望用户输入两个数字并自动生成网格和数字。

<div style="background-image:url(/images/linegrid100.png);
width:980px;height:700px;
border:1px solid black;padding:10px;">

我看过大量的网格生成器。我考虑过使用表格而不是图像。那会更好吗？我如何处理数字生成的数学？似乎这一切都应该很简单，但我找不到太多信息。（现在用谷歌搜索了几天）这些类型的网格一直在图形程序和 CAD 程序中完成。

任何帮助，将不胜感激。

TIA-雷切尔

好的。这是您的代码的结果。它正在运行:-) 但不如预期。我整天都在处理代码。现在它更有意义了，但我仍然迷失在循环和数学中。有任何想法吗？很高兴能得到帮助，这很有趣。再次感谢-R

似乎影响事物的代码是：

w = parseInt($square.css('width'), 10) + 2; //the width of each square + 2 pixels for the borders;

如果我保持原样： 在此处输入图像描述

如果我将 10 更改为 100：

在此处输入图像描述

4

1 回答 1

3

假设您有以下表单，用户在其中输入两个数字：

<form>
    <input type="text" id="x">
    <input type="text" id="y">
</form>

然后你可以使用 jQuery 来生成你的网格，如下所示：

var x = parseInt($('#x').val(), 10),
    y = parseInt($('#y').val(), 10);

grid(x, y);

function grid(x, y) {
   var i = -1,
       j = -1,
       step = 5, //assuming that each grid unit = 5
       $grid = $('<div>', {'id':'grid'}),
       $square = $('<div>', {'class':'square'}),
       $label,
       w = parseInt($square.css('width'), 10) + 2; //the width of each square + 2 pixels for the borders;

  $grid.width(w * x);

  while(++i < x) {
       while(++j < y) {
        if(j === 0) {
        $label = $('<span>', {'class':'label'});
        $label.css('top', j * w).css('left', i * w).html(i * step);
        }
        if(i === 0 && j > 0) {
            $label = $('<span>', {'class':'label'});
        $label.css('top', j * w).css('left', i * w).html(j * step);
            }
            $grid.append($square.clone(), $label);
       }
       j = -1;
  }
  $('body').append($grid);
}

CSS：

#grid { overflow: hidden; border-left: 1px solid #000; border-top: 1px solid #000; position: relative; }
div.square { width: 50px; height: 50px; float: left; border-bottom: 1px dotted #000; border-right: 1px dotted #000; }
span.label { position: absolute; background: #fff; font-weight: bold; z-index: 10; }

假设这是我们的叠加层（对话框）：

<div>
    <input type="text" id="x">
    <input type="text" id="y">
    <button id="build-grid" type="button">Build grid</button>
</div>

然后，将 onclick 事件附加到 build-grid 按钮。因此，当单击按钮时，我们读取 x 和 y 值并构建网格。

$('#build-grid').on('click', function(e){
   e.preventDefault();
   var x = parseInt($('#x').val(), 10), //get our values from the input fields
       y = parseInt($('#y').val(), 10);

   grid(x, y); // build the grid
});
于 2013-01-15T04:13:36.187 回答