10x10 table and store X/Y of cell selected?

[Flanelman]

Hey guys, I was hoping to somehow implement a 10x10 table onto my webpage where you select a cell and then store the X and Y value of the cell clicked but I'm really not sure on how to store the values, or to make the cell interactive (clickable) without having 100 buttons.
 

My end goal is pretty much something like this: http://materdeimath.pbworks.com/f/GraphPaper20x20AxesUnits.bmp Where I can store the X/Y values of the clicked cell, is this possible? If any of you guys have any idea how I would accomplish this I would really appreciate the help, Thanks!

[Rechdan]

Are you able to use jQuery?

[Flanelman]

3 minutes ago, Rechdan said:

Are you able to use jQuery?

I'm not too good with it, but I'm willing to try!

[codesidian]

This might be completely the wrong thing, but this guy implements a grid and has to take user input of what cell they clicked. If you remove all the minesweeper aspects this is pretty much what you're asking for right? He's using JS and p5. 

 

[Flanelman]

2 minutes ago, codesidian said:

 

Snip

 

 

2

Awesome, I'll give this a watch, thanks!

[Rechdan]

Ok, then you should bind a class for each cell and make then wait for a click event, when that event occurs you add another class to make it selected. I think that's how you should handle it!

[SilicateWielder]

On 11/11/2017 at 7:57 PM, Flanelman said:

Hey guys, I was hoping to somehow implement a 10x10 table onto my webpage where you select a cell and then store the X and Y value of the cell clicked but I'm really not sure on how to store the values, or to make the cell interactive (clickable) without having 100 buttons.
 

My end goal is pretty much something like this: http://materdeimath.pbworks.com/f/GraphPaper20x20AxesUnits.bmp Where I can store the X/Y values of the clicked cell, is this possible? If any of you guys have any idea how I would accomplish this I would really appreciate the help, Thanks!

This is a bit convoluted but you could  try creating an array consisting of 10 smaller arrays using JavaScript.

Spoiler

var table = function()
{
	this.table = [[], [], [], [], [], [], [], [], [], []];
  
  	for (a = 0; a < 9; a++)
    {
    	for (b = 0; b < 9; b++)
        {
        	this.table[a][b] = [0, 0];
        };
    };
};

table.prototype = {};

table.prototype.setValue = function(tX, tY, x, y)
{
	this.table[tX][tY] = [x, y];
};

table.prototype.getValue = function(tX, tY)
{
	return(this.table[tX][tY]);
};

 

To use this you would call var webTable = new table() and then you can write and retrieve values using  webTable.setValue(); and webTable.getValue();

 

I'm not familiar with browser APIs so I'm not much help beyond this point.

[davidna2002]

maybe you can create a loop to build the table and insert an image that matches the background that will have the values of the X/Y.  then save the info in a database or print it out to the screen via echo statement and store value in hidden form element.  you can also store values in session variables, or use a GET statement to drop in url,  you can also store values in an array.  pretty vague I know but maybe it'll get your mind thinking out side the box (pun definitely intended).