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 pleted 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.

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 pleted 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.

• javascript
• jquery

• Is there a particular reason why you're set on Canvas? – Nic Commented Jul 8, 2011 at 14:48
• @melee: Indeed, what does he have against div or even gasp tables? – josh.trow Commented Jul 8, 2011 at 14:49
• Yeah, I think tables is actually the appropriate element :) – Nic Commented Jul 8, 2011 at 14:52
• @melee I'm not set on anything. My question is what should I do to make this table. – Briz Commented Jul 8, 2011 at 14:56
• So, your question is how to write a table in HTML? – Šime Vidas Commented Jul 8, 2011 at 14:56

3 Answers 3

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/simevidas/hdBZY/

Here's a working jsFiddle, it uses jQuery and Tables to do exactly as you asked. From an array of items, it will automagically build the graph, all you have to provide is the array and the css.

http://jsfiddle/Z7Ds6/3/

I agree with the ments you've gotten, I don't see anything wrong with using plain old html tables for this.

You could either create the table and css like Sime Vidas suggested and manipulate class names with jquery, or you could create the html elements via jquery with something like $('<table>') etc, and use the .append() method to create child elements and/or dump the code to the page somewhere.