CSS and jQuery: Constructing Periodic Table of Elements (Chemistry)

This was built with jQuery and CSS. Hopefully this is nice enough to look at. I did this because usually the table is on some gigantic picture of some sort. Quite frustrating to search an element on it. This one has some basic interactive hover functions.

So, more fun, I guess.

I injected each element's atomic number (the number of proton of the element) and the Latin (and the English) name for them. A fun time.

Anyway, I didn't optimize the coding, but I clustered some redundant declarations of looping stuffs.

Pretty long lines, so yeah, neat productive idle time.
Please use the latest browser to enjoy this demo.

This is based on my quite-old Chemistry book. Recent laboratory tinkering already revealed (or named) the "unknown" elements, and friggin "switch" the species of some elements. You can google IUPAC (International Union of Pure and Applied Chemistry) for that. Find the funny names.

---

---

Synopsis about the tables

• First, declare two table elements. One for main elements [7x18], and the second [2x14] for the Lanthanide/Actinide series.
• Second, I appended the x-y (column-row) coordinates, using index(), just so I can be sure about the table cell position. But after that I deleted it.
• Third, style the table, put fake 'empty' styling for table cells which don't have any element on it.
• Fourth, this one was quite funny, creating an array for each row. So, 9 arrays (7 for main elements, 2 for Lant/Act). Then I appended those arrays to each table's row children elements, the columns.
• Fifth, the colors and the detailed species of the elements. Basically, I used children elements filter : children() and combined with nextUntil() for appending the same thing (either class or other element).
• Sixth, I created a 'monitor' element which will display the 'detailed' stuff about a particular element. I achieved that by 'copying' the html() content of each table cell to the 'monitor'.
• The last, put some additional fancy styling/interaction. This can be so much fun, depends on your knowledge of CSS and JavaScript (jQuery). I put practically nothing on this step. ^_^

---

That's about it, I think. A global idea of creating a funky interactive table. In this case, a periodic table of elements.

See ya next time.