如何使用鼠标单击以颜色填充html表制成的网格？

Question

I want to create a simple tool so that user can fill colors inside html table fields or whatever the alternative you can suggest. Take a look at this page: http://www.olmares.com/Price%20and%20Availability.htm

I am looking for some tool, interface, Javascript or any other way so that my client fill in the table boxes with colors easily. How can I achieve this?

Answer 1

you can set csscalass for your table td by javascript.

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

and your css:

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

Answer 2

you need to set up a click handler for your table cells that react by changing the color of the cell clicked in .. in jQuery it'd be something like

var current_color = 'red';

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

thus whatever the current_color is (changed perhaps via other user interaction) gets applied to subsequently clicked cells.

Answer 3

I have added an extra, so when you click on highlighted td, it will remove it.

Working link : 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');
    });
});