Как мне построить простую таблицу 4х4 с заполненными блоками

Question

Используя Jquery, я хочу построить таблицу размером 4x4 с блоками одинакового размера, которую я могу «заполнить» цветом.

Визуальный пример:

В этот вопрос не нужно включать кружок.

Я ищу советы, ссылки или предложения о том, как это построить. Я не очень знаком с функциональностью Jquery Canvas / Draw, но я думаю, что может быть возможным решением. Определить, для каких ящиков будут заполнены, будет установлено, сколько уровней задания игрок завершил. Например, первая колонка показывает, что игрок прошел все 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/

Answer 2

Вот рабочий jsFiddle, он использует jQuery и Tables, чтобы делать именно так, как вы просили.Из массива элементов он автоматически построит график, все, что вам нужно предоставить, - это массив и CSS.

Answer 3

Я согласен с полученными вами комментариями, я не вижу ничего плохого в использовании для этого простых старых html-таблиц.

Вы можете создать таблицу и css, как предложил Симе Видас, и манипулировать классом.имена с помощью jquery, или вы можете создать html-элементы через jquery с чем-то вроде $ ('