jQuery colorpicker and table cell

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(' .... ');

	});

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

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.

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?

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

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

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

What have you tried so far using the colorpicker? It will be much easier to help you, if we can see all the code you have so far.

1 Like

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

1 Like
<!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(' .... ');

	});```

thanks. I’ll try this

I think this video could be helpful :slight_smile:

2 Likes

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?

Maybe try this instead:

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

Thank you so much Randell :slight_smile: