javascript - 尝试使用 Javascript 和 CSS 绘制网格元素

Question

我想创建一个正方形网格。为此，我制作了一个二维数组，它将在某个位置产生一个 div (应该是它的位置乘以 4px，因为这是每个正方形的大小)我不知道我做错了什么，因为我的浏览器没有显示错误。我知道出了什么问题，因为当我激活此功能时没有打印任何内容。澄清一下，我已经为 'alive' 和 'dead' 类的元素分配了 CSS 属性，并添加了 'canvas' id 在页面末尾，所以我认为错误在于 div 本身的创建。在制作网格时一遍又一遍地创建 div 是否是正确的做法？我离题了。感谢您的宝贵时间。

$(document).ready(function () {
    "use strict";
    $("#btnstart").click(function () {
        for (i = 0; i < xclength; i++) {
            for (j = 0; j < yclength; j++) {
                if (xycoords[i][j] === 1) { //if cell is alive
                    jQuery('<div/>', {
                        className: 'alive',
                        id: "x" + j + "y" + i,
                        css: {
                            position: "absolute",
                            top: (i * 4) + "px",
                            left: (j * 4) + "px"
                        }
                    }).appendTo('#canvas');
                } else { //if cell is dead
                    jQuery('<div/>', {
                        className: 'dead',
                        id: "x" + j + "y" + i,
                        css: {
                            position: "absolute",
                            top: (i * 4) + "px",
                            left: (j * 4) + "px"
                        }
                    }).appendTo('#canvas');
                }
            }
        }
    });
});

Answer 1

这是一种用 div 标签制作网格的方法。现场示例:http://jsfiddle.net/3x1kmcme/

var rows = 8,
    cells = 8,
    count = 0;

var i, j,
    top = 0,
    left = 0;

var boxWidth = 50,
    boxHeight = 50;

var $canvas = $('#canvas');
var $fragment = $(document.createDocumentFragment());

function addBox(opts) {
  var div = document.createElement('div');
  div.id = opts.id;
  div.className = 'alive';
  div.style.top = opts.top + "px";
  div.style.left = opts.left + "px";

  div.innerHTML = '<p>' + opts.count + '</p>';
  $fragment.append(div);
}

for (j = 0; j < rows; j += 1) {
  top = j * boxHeight;

  for (i = 0; i < cells; i += 1) {
    count += 1;

    addBox({
        count: count,

        id: 'item' + i,
        top: top,
        left: i * boxWidth
    });
  }
}

// Append all
$canvas.html($fragment);