javascript - How should I build a simple 4x4 table with fill-able blocks - Stack Overflow

admin2025-04-26 6

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.

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.

Share Improve this question edited Sep 16, 2018 at 11:22 Brian Tompsett - 汤莱恩 5,89372 gold badges61 silver badges133 bronze badges asked Jul 8, 2011 at 14:46 Briz 5361 gold badge10 silver badges22 bronze badges

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

| Show 2 more ments

3 Answers 3

Sorted by: Reset to default 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.

转载请注明原文地址:http://conceptsofalgorithm.com/Algorithm/1745661484a312769.html

javascriptHow should I build a simple 4x4 table with fillable blocksStack Overflow

最新回复(0)