编号网格jquery移动css

Question

我想创建一个带编号的网格。用户输入数字并生成网格。我想在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;">

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

任何帮助都将不胜感激。

TIA -Rachel

---

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

似乎影响事物的代码是：

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

如果我像你一样离开它：

如果我将10更改为100：

Answer 1

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

<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事件附加到构建网格按钮。因此，当单击按钮时，我们读取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
});