编号的网格jQuery的移动css

Question

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

目前的情况是，我有一个重复整个页面的网格图像的股利。我必须为每个背景重新生成一张图片。即：用户想要一个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事件附加到build-gr ID按钮。所以，当按钮被点击时，我们读取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 
});