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

Question

使用Jquery，我想构建一个大小为4x4的表，其大小相等，我可以用颜色“填充”。

视觉示例：

此问题不必包含圈子。

我正在寻找有关如何构建此建议的建议，链接或建议。我对Jquery的画布/绘图功能不是很熟悉，但我认为可能是一种可能的解决方案。填充框的确定将由玩家完成的工作级别设置。例如，第一列显示玩家已完成所有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重置样式表，以使表格显示为相同的跨浏览器。

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

Answer 2

这是一个有效的jsFiddle，它使用jQuery和Tables完全按照你的要求去做。从一系列项目中，它将自动构建图形，您必须提供的只是数组和css。

http://jsfiddle.net/Z7Ds6/3/

Answer 3

我同意你的评论，我没有看到使用普通的旧HTML表格出现任何问题。

您既可以创建表格，也可以像Sime Vidas一样创建css，并使用jquery操作类名称，或者您可以通过jquery创建html元素，例如$（＆＃39;＆lt; table＆gt;＆＃39;）等，并使用.append()方法创建子元素和/或将代码转储到页面某处。