+ 2

HTML / JS problem with table cells and their IDs

Hi guys, I've a problem I cannot solve. My web game is set in a 4x4 table. The first 15 cells look like this: <td id="number from 1 to 15" onclick="a JS/jQuery function"><div class="some name"><svg>mostly lines and polylines</svg></div></td> and the last one is just <td id="16" onclick="the same function"></td>. The first 15 cells are good - the function gets their IDs right. But when I click on the one that's empty the function finds its ID is the same as the cell to its left (only ok if it's the 1st cell)

24th Aug 2017, 6:25 PM
nikola pizurica
8 Answers
+ 3
I just found out this applies for cells that are right above the empty one. So, if the empty cell is the first one in a row it will copy the ID of the cell above it. For example, if its ID should be 9 (the first cell of the 3rd row) the function gets 5 as its ID.
24th Aug 2017, 6:34 PM
nikola pizurica
+ 2
It's probably due of the specific behaviour of empty cells, which are not displayed in most of context... Try to workaround by putting invisible content inside: <td id="16" onclick="...">&nbsp;</td> ... or: <td id="16" onclick="..."><br></td>
24th Aug 2017, 10:08 PM
visph
visph - avatar
+ 2
Nope guys, those methods aren't working, it still copies the ID of the neighbor cell...
25th Aug 2017, 7:23 AM
nikola pizurica
25th Aug 2017, 7:28 AM
nikola pizurica
+ 1
svg{ max-width: 100% } or .piece{ overflow:hidden; }
25th Aug 2017, 7:33 AM
Yaroslav Pieskov
Yaroslav Pieskov - avatar
+ 1
That's it, thank you!
25th Aug 2017, 7:36 AM
nikola pizurica
0
maybe you can set id like "#row-#column" for example first cell will be <td id="1-1"></td>
24th Aug 2017, 7:32 PM
Yaroslav Pieskov
Yaroslav Pieskov - avatar
0
can you show your code?
25th Aug 2017, 7:24 AM
Yaroslav Pieskov
Yaroslav Pieskov - avatar