Assigning colors to HTML table cells using javascript

Question

I am trying to create a HTML table where a user can select a color and when dragged over a table cells or list the same color should be applied to those table cells, here is an example of how my table should look http://pekas.lbclients.info/SchedulesWorkManage.php ,

Here is another example http://jsfiddle.net/few5E/ using jquery, i want some thing similar to this but i want to add different colors to the table by selecting colors.

I am new to javascript so any help regarding this will be really helpfull.

Thanks in advance!

jfrey · Accepted Answer · 2012-08-09 02:31:10Z

2

So if you were to have div or table cells that have a class of .color-selection then when were clicked you would have something like:

<div style="background-color: blue;">Blue</div>
<div style="background-color: green;">Green</div>
<div style="background-color: red;">Red</div>

var selectedColor = "black";

$('.color-selection').click(function(){
   selectedColor = $(this).css('background-color');
 });

Then when your table cell is clicked, you would just assign the selectedColor variable to the style of the cell by doing:

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

edited Aug 9, 2012 at 2:31

answered Aug 9, 2012 at 0:58

jfrey

444 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

user1586243 Over a year ago

I think this would allow to select only one color, i want to have like at least three colors(as buttons), so when i select(click) one out of the three colors and drag on the table cells, all the selected cells should get that color.

jfrey Over a year ago

If you try the code out, you'll see that each time you click on a different color div, it should give you what you're looking for.

user1586243 Over a year ago

Created a fiddle jsfiddle.net/few5E/216 , it works great, but i want to add a drag feature to it so, instead of clicking on each cell i want to make a drag and select, so all the cells which were involved in the drag gets the selected color.(like onMouseDown and onMouseOver functions)

user1586243 Over a year ago

Thank You so much jfrey, this was really helpful, i will try out the drag feature and get back to you if i have problems, once again thank you so much.

user1586243 Over a year ago

Hi jfrey, finally achieved what i wanted, here is the fiddle jsfiddle.net/28SMv/66 , this works fine even when associated with html form hiddenelements, but now i want to do form validation like when the first td is clicked i want the value of that, any help?

|

Collectives™ on Stack Overflow

Assigning colors to HTML table cells using javascript

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related