How do I to define td-elements over which is another element using jQuery or JavaScript?

Question

During the development of the client side of Sea Battle I stumbled on this problem. I have two panels: with ships and with board. Look at this screen:

Every ship and gameboard is a table. Each cell of the table has it's id (1-100). I drag my ships using "draggable" plugin. Board is a "droppable" element. How do I to define those td-board elements over wich the ships is? For example, on that screen it should be noted cells with id: 12, 13, 14, 15.

Answer 1

You could use the data- attribute to differentiate one td from the other and matching it with whatever logic you use to generate the ships. When the drop event fires you can figure out what td you are dealing with.

However, you will likely run into rendering issues as soon as you start trying to add fancy styling to the td elements. Needless to say that you are pushing the boundaries of what table markup is meant for. I would suggest to play with the canvas element and try to build your game with it.