Как заполнить html-таблицу сеткой цветами с помощью мыши?

Question

Я хочу создать простой инструмент, чтобы пользователь мог заполнять цвета внутри полей таблицы HTML или любой другой альтернативы, которую вы можете предложить. Взгляните на эту страницу: http://www.olmares.com/Price%20and%20Availability.htm

Я ищу какой-нибудь инструмент, интерфейс, Javascript или любой другой способ, чтобы мой клиент легко заполнял поля таблицы цветами. Как мне этого добиться?

Answer 1

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

var current_color = 'red';

$('td').click(function() {
   $(this).css('background-color', current_color);
});

, поэтому независимо от значения current_color(изменено, возможно, из-за другого взаимодействия с пользователем) применяется к последующим нажатым ячейкам.

Answer 2

Я добавил дополнительный, поэтому, когда вы нажимаете на выделенный тд, он удалит его.

Рабочая ссылка: http://jsfiddle.net/dEy2H/

CSS

.HighLight {background-color:#ff0000 !important;}

JQuery

$(function() {
    $('td').click(function() {
        if ($(this).hasClass('HighLight'))
            $(this).removeClass('HighLight');
        else
            $(this).addClass('HighLight');
    });
});

Answer 3

вы можете установить csscalass для вашей таблицы td с помощью javascript.

    <Table><tr>
<td cssclass="a"></td><td cssclass="b"></td>
</tr></table>

и ваш css:

.a{backgroundcolor:red}
.b{backgroundcolor:green}