使用 html/js 创建可点击网格的最有效方法是什么？答案

【问题标题】：What is the most efficient way to create a clickable grid with html/js?使用 html/js 创建可点击网格的最有效方法是什么？
【发布时间】：2016-04-23 10:03:08
【问题描述】：

我正在尝试设置一种类似于扫雷的游戏，我可以通过网络与我的父亲分享。我将如何使用循环来创建该网格并使每个索引处于我可以操作的某个坐标处？感谢大家。

【问题讨论】：

标签： javascript html grid click minesweeper

【解决方案1】：

您可以使用多维数组（数组的数组）。

var gridWidth = 10;
var gridHeight = 10;
var grid = [];
for(var y = 0; y < gridHeight; y++)
{
    grid.push([]);
    for(var x = 0; x < gridWidth; x++)
    {
        grid[y].push(0);
    }
}

您现在有一个 10x10 的网格，您可以通过 grid[x][y] 访问它

在页面上用 HTML 表示它取决于您使用的框架。如果你想用原始的 javascript 来做，你也许可以输出一个表格。

document.write('<table>');
var gridWidth = 10;
var gridHeight = 10;
var grid = [];
for(var y = 0; y < gridHeight; y++)
{
    document.write('<tr>');
    grid.push([]);
    for(var x = 0; x < gridWidth; x++)
    {
        document.write('<td onclick="alert(\'clicked\');">');
        grid[y].push(0);
        document.write('</td>');
    }
    document.write('</tr>');
}
document.write('</table>');

【讨论】：

这正是我正在寻找的。我需要在 html 中做些什么特别的事情吗？我使用的是 Chrome，所以这应该不是问题。
好吧，显然您需要添加所有游戏逻辑。 StackOverflow 不会为您编写，但如果您遇到困难，请随时询问 :)
谢谢！我的意思是除了基本的html结构之外，我还需要一个已经写在html中的表格吗？
好吧，我上面写的代码会为你输出，但是 document.write() 是不好的做法，原因有几个——我只是为了演示目的才添加它。理想情况下，您应该使用一个框架——例如，jQuery 非常流行。我个人在我所做的几乎所有事情上都使用 Angular，但有一个学习曲线。
它说“clickableGrid”没有定义。我正在使用 jquery 1.12.3

【解决方案2】：

这会给你一些点击事件，报告列和行。

css:

td {
    border: black solid 1px;
}

html:

<table class="table"></table>

javascript：

$('.table').on('click', 'td', function () {
    console.log($(this).attr('data-row'));
    console.log($(this).attr('data-column'));
})

var columns = 10, rows = 10

function createGrid(columns, rows) {
    var table = $('.table');

    for (var i = 0; i < rows; i++) {
        var row = $('<tr>');
        table.append(row)
        for (var j = 0; j < columns; j++) {
            var cell = $('<td>')
            cell.attr('data-row', i);
            cell.attr('data-column', j)
            row.append(cell);
        }
    }
}
createGrid(columns, rows);

【讨论】：