I would like to create a grid in my mobile app in which I can change the color of each cell by tapping the cell, like an on/off switch. The following is the image of what I created and a web application using table, CSS, and jQuery. Any help to understand how to create such a thing in a mobile app (android or iPhone) would be appreciated.

Mobile apps are HTML/CSS/JavaScript, and leverage ReactJS.

You can use the HTML element widget to add table, rows, and cells on a screen, CSS to style them, and JavaScript to handle interaction.

My question is what is the purpose for this? It might be that a different interaction pattern would be more appropriate for a mobile device. Specifically, if the grid needs to have as many rows and columns as you show above, on anything smaller than a full-size tablet, the tap targets are likely to be small enough to be error-prone and frustrating for the user.

Hi Andrew,

Thank you for response and your great advice. I already created a table HTML element in my mobile app, but I couldn't find how I can include jQuery to program the table. The purpose of this grid is to create a fishnet over an image such as a tiled map so that the user can indicate the locations they want to select on the image. They may want to change the resolution of the fishnet by selecting the different number of rows and columns. Please let me know if there is a best practice to do so.


Related image 

This course might be helpful:


That being said, I would recommend spending some time re-thinking the interaction pattern. Something that was designed for a web application may not be the best approach for mobile.