jQuery colorpicker and table cell

General
1

Good evening.
I have a problem with jquery. I create table with jquery when a person choose width and height in a form. It works, but the problem is that I need to change table cell color on click which I get from color picker. So two problems are:

  1. I don’t know how to put colorpicker value to the click function to change cells in that color.

  2. I don’t know why but I can’t click on the cells, I mean if the table is already exists before loading the page and it is in html document I can click and change the color but if it is not exist and creates live with the input form by the user I can’t change the color.

my js code

function makeGrid() {
	
	

			$('.gridForm').submit(function(e) {
				e.preventDefault();
				$('#pixels').html('');
				
				x=$('#gridHeight').val(); // value of height
				y=$('#gridWidth').val();  // value of width

				for(i=0; x>i;x--){
					$('#pixels').append('<tr><td></td></tr>');
				}

				for(j=1; y>j ;y--){
					$('tr').append('<td></td>');
				} 	
			});


	
}
	
makeGrid();
	

	$('td').click(function(){
		  $('.color').$('#colorCanvas').val(); //value from the color picker
		 
                $('td').toggleClass(' .... ');

	});
2

You are dynamically making a table then want to add events to that?
I’m not sure if it is possible.

3

I create a table with the help of the input form where I choose width and height of the table and it creates dynamically on the page and all I need is to change the color of the each cell I click on to the color which is chosen in the Color-picker on the page and make it white again if I click again on it.

Want to create Pixel Art Maker one page game/app.

4

Difficult to imagine. You don’t have a codepen or jsfiddle?
You know that clicking / selecting a td will select all of them in jQuery?

5

I have codepen but trying to do this on my local PC

I know that it selects all because there none of them in origin html file and I need to operate all which will be created

6

I would use ids to target each cell personally.
And a class selector if you have to change all cells.

7

but how to use colorpicker value to make it cells background when i click on it(cell)?

9

For handling events on dynamic markup, you should be using delegation.

1 Like
10 
<!DOCTYPE html>
<html>
<head>

	<meta charset="utf-8">
	<title>Pixel Art Maker!</title>
	<link rel="stylesheet" href="app.css">
	<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
	</style>
</head>

<body>

	<h1> PIXEL ART MAKER </h1>

	
	
	<form class='gridForm' >
		Grid Height: 
		<input type="number" id="gridHeight">
		Grid Width: 
		<input type="number" id="gridWidth">
		<input type="submit">	
	</form>
	

	<div class='colorPicker'>Pick a color 
	<input type='color' id='colorCanvas' value='#ff0000'>	</div>

	<p class='designCanvas'>Design Canvas</p>
	<table id='pixels'>
		
		
	</table>
			

	<script src="app.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>

and js

function makeGrid() {
	
	

			$('.gridForm').submit(function(e) {
				e.preventDefault();
				$('#pixels').html('');
				
				x=$('#gridHeight').val(); // value of height
				y=$('#gridWidth').val();  // value of width

				for(i=0; x>i;x--){
					$('#pixels').append('<tr><td></td></tr>');
				}

				for(j=1; y>j ;y--){
					$('tr').append('<td></td>');
				} 	
			});


	
}
	
makeGrid();
	

	$('td').click(function(){
		  $('.color').$('#colorCanvas').val(); //value from the color picker
		 
                $('td').toggleClass(' .... ');

	});```
11

thanks. I’ll try this

12

I think this video could be helpful :slight_smile:

2 Likes
13

thanks everybody for help. I have one more question.

$('table').on('click', function() {
		  $( this ).find('td').toggleClass("color");

	});

this code changes the whole table into .color class color and I need just one cell(td). How to reach this?

14

Maybe try this instead:

$('table').on('click', "td", function() {
  $( this ).toggleClass("color");
});
2 Likes
15

Thank you so much Randell :slight_smile: