我应该如何构建一个简单的4x4表与填充块 [英] How should I build a simple 4x4 table with fill-able blocks

问题描述

使用Jquery，我想建立一个大小为4x4的表，大小相同的块，我可以填充一种颜色。

p>

此问题不需要包含此圈子。

我正在寻找有关如何构建的建议，链接或建议这个。我不太熟悉Jquery的canvas / draw功能，但我认为可能是一个可能的解决方案。填充哪些框的确定将由玩家完成了多少级的作业来设置。例如，第一列显示玩家已经完成了所有4个级别。

但是，我可以担心如何发送信息。

解决方案

在这里你可以：

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 ="">< / td> 
< / tr> 
< / table> 
  

CSS：

 code> 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/

Using Jquery, I want to build a table of size 4x4 with equal sized blocks, which I can "fill" with a color.

Visual example:

The circle does not have to be included for this question.

I'm looking for advice, links, or suggestions on how to build this. I'm not very familiar with Jquery's canvas/draw functionality but I think that may be a possible solution. The determinate for which boxes are filled will be set by how many levels of a job a player has finished. For example the first column shows that the player has completed all 4 levels.

However, I can worry about how to send in the information. What I'm unsure of is (again) the best way to make a simple table like this.

解决方案

Here you go:

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; }

Additionally, you may want to use a CSS Reset style sheet in order to make the table appear the same cross-browser.

Live demo: http://jsfiddle.net/simevidas/hdBZY/

这篇关于我应该如何构建一个简单的4x4表与填充块的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！