First let me just say it's nice to see someone actually trying to form a table properly for a change. Too many people don't even know that TH, TBODY, and THEAD even exist. Would be nice if you had SCOPE and proper TH for each row... but still head and shoulders over most of what I see people make...

Sadly you kind of bunged it sideways from there.Your use of the slower queryselector instead of getElementsByTagName, the use of guerySelectorAll to do what node walking should have handled, use of the possibly insecure innerHTML to do what DOM creation should have handled, the addEventListener hooking the table with target instead of hooking the anchors, use of anchors to do BUTTON's job,... and that's before we get to the sort.

Where you're again using querySelector where either tr.cells or DOM walking could have been leveraged...

Even just the minor performance goof of constantly calling the slow querySelector on tbody over and over again inside the loop.

Iffn'be ye don't mind, I mayst write my own article on this and back-link to yours. There's so much room for improvement on this.

Written by

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store