javascript - 我应该如何构建一个带有可填充 block 的简单 4x4 表

Question

我想使用 Jquery 构建一个 4x4 大小的表格，其中包含大小相同的 block ，我可以用一种颜色“填充”它。

视觉示例:

这个问题不必包含圆圈。

我正在寻找关于如何构建它的意见、链接或建议。我不是很熟悉 Jquery 的 Canvas /绘图功能，但我认为可能是一个可能的解决方案。确定填充哪些框将取决于玩家完成了多少级别的工作。例如，第一列显示玩家已完成所有 4 个级别。

但是，我可以担心如何发送信息。我不确定(再次)制作这样一个简单表格的最佳方法。

Answer 1

给你:

HTML:

<table>
    <tr>
        <td class="a"></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td class="a"></td>
        <td></td>
        <td class="c"></td>
        <td></td>
    </tr>
    <tr>
        <td class="a"></td>
        <td class="b"></td>
        <td class="c"></td>
        <td></td>
    </tr>
    <tr>
        <td class="a"></td>
        <td class="b"></td>
        <td class="c"></td>
        <td class="d"></td>
    </tr>
</table>

CSS:

td { width:40px; height:40px; border:1px solid #333; }
td.a { background-color:red; }
td.b { background-color:blue; }
td.c { background-color:purple; }
td.d { background-color:green; }

此外，您可能希望使用 CSS Reset 样式表以使表格在跨浏览器中显示相同。

现场演示: http://jsfiddle.net/simevidas/hdBZY/