How I cope with HTML tables.

TK-427 · 56 points · Posted at 01:55:01 on June 12, 2016 · (Permalink)

So this is the pivot table all my coworkers keep talking about

idle_zealot · 98 points · Posted at 02:06:16 on June 12, 2016 · (Permalink)

OP posted their code already, but it pulls in the entire Font Awesome CSS. Here's a lighter version:

javascript:style=document.createElement("style");style.innerHTML=".my-spin {transition: 1s linear;transform: rotate(360deg);}";document.getElementsByTagName("head")[0].appendChild(style);function toggleSpin(){document.querySelectorAll("table").forEach(function(a){a.classList.toggle("my-spin")})}toggleSpin();setTimeout(toggleSpin,2E3);

Remember to name it

(╯°□°)╯︵ ┻━┻

brown_monkey_ · 10 points · Posted at 06:47:44 on June 12, 2016 · (Permalink)

document.querySelectorAll("table").forEach(...)

That shouldn't work. Query selector all returns a node list, not an array, and there is no forEach method on it.

1lann · 16 points · Posted at 08:57:28 on June 12, 2016 · (Permalink)

Was added in Chrome version 51 released on May 25th 2016. Change was committed on March 15th 2016:

In addition to the above interfaces, the NodeList interface is granted the methods "forEach", "keys", "values", and "entries", due to the iterable<Node> definition in https://dom.spec.whatwg.org/#interface-nodelist. Like the above interfaces, NodeLists are also iterable via ECMAScript for-of loops.

From https://chromium.googlesource.com/chromium/src/+/2f9367a3f1bc731e1cae19edfa3b89bc18071093

So you would be correct if you're using Chrome version 50 or older.

troido · 16 points · Posted at 11:49:02 on June 12, 2016 · (Permalink)*

Doesn't work in firefox either.

Here is the same code with a normal for loop that should work in more browsers:

javascript:(function(){style=document.createElement("style");style.innerHTML=".my-spin%20{transition:%201s%20linear;transform:%20rotate(360deg);}";document.getElementsByTagName("head")[0].appendChild(style);function%20toggleSpin(){var%20tables=document.querySelectorAll("table");%20for%20(var%20i=0;i<tables.length;%20i++){var%20a=tables[i];a.classList.toggle("my-spin")}}toggleSpin();setTimeout(toggleSpin,2E3);})();

TarMil · 5 points · Posted at 18:17:42 on June 12, 2016 · (Permalink)

Using Array.prototype.forEach.call() should also work everywhere.

idle_zealot · 1 points · Posted at 16:10:52 on June 12, 2016 · (Permalink)

Ah, I only tested in Chromium, thanks for posting a more compatible option.

dbbeginner · 1 points · Posted at 18:30:34 on June 12, 2016 · (Permalink)

works like a charm in Safari

dbbeginner · 1 points · Posted at 18:34:30 on June 12, 2016 · (Permalink)

Woohoo! lookit me!

javascript:(function(){style=document.createElement("style");style.innerHTML=".my-spin%20{transition:%201s%20linear;transform:%20rotate(360deg);}";document.getElementsByTagName("head")[0].appendChild(style);function%20toggleSpin(){var%20tables=document.querySelectorAll("a");%20for%20(var%20i=0;i<tables.length;%20i++){var%20a=tables[i];a.classList.toggle("my-spin")}}toggleSpin();setTimeout(toggleSpin,2E3);})();

or even worse...

javascript:(function(){style=document.createElement("style");style.innerHTML=".my-spin%20{transition:%201s%20linear;transform:%20rotate(360deg);}";document.getElementsByTagName("head")[0].appendChild(style);function%20toggleSpin(){var%20tables=document.querySelectorAll("div");%20for%20(var%20i=0;i<tables.length;%20i++){var%20a=tables[i];a.classList.toggle("my-spin")}}toggleSpin();setTimeout(toggleSpin,2E3);})();

blueblur112198 · 4 points · Posted at 16:43:43 on June 13, 2016 · (Permalink)

Javascript

That shouldn't work.

What did you expect?

Relevant_Monstrosity · 1 points · Posted at 22:43:36 on June 12, 2016 · (Permalink)

I can fix that for you (this works).

var nodeList = document.querySelectorAll("table");
nodeList.forEach = Array.prototype.forEach;
nodeList.forEach(function(node){
  // do something
});

[deleted] · -3 points · Posted at 07:24:03 on June 12, 2016 · (Permalink)

[deleted]

Scorpius289 · -1 points · Posted at 07:41:02 on June 12, 2016 · (Permalink)

Can confirm that it works.

coladict · 2 points · Posted at 16:57:32 on June 13, 2016 · (Permalink)

I added that emoticon to our site's error page only on error code 500, and the boss didn't object when he saw it. It's just to ease the tension of getting those errors when we have them.

🎙️ jj4th · 1 points · Posted at 03:57:41 on June 13, 2016 · (Permalink)

To you and all the people who posted replies. Good job taking my little hackish lazy-programmer code and improving on it!

[deleted] · 0 points · Posted at 18:19:47 on June 12, 2016 · (Permalink)

[deleted]

idle_zealot · 2 points · Posted at 18:51:54 on June 12, 2016 · (Permalink)

Honestly, I like yours better. Mine adds a new style tag every time it's run, where as yours doesn't leave much behind. Here is your version, but minified:

!function(){for(var t=document.getElementsByTagName("table"),e=0;e<t.length;e++)t[e].style.transform="rotate(360deg)",t[e].style.transition="1s";setTimeout(function(){for(var e=0;e<t.length;e++)t[e].style.transform="rotate(0deg)",t[e].style.transition="initial"},1e3)}();

[deleted] · 37 points · Posted at 21:49:03 on June 11, 2016 · (Permalink)*

[deleted]

ProgramTheWorld · 6 points · Posted at 23:22:39 on June 11, 2016 · (Permalink)

I mean you just have to add an animation in CSS for all table... not much there :)

8bitslime · 15 points · Posted at 02:01:27 on June 12, 2016 · (Permalink)

Didn't know you could run CSS from a bookmark...

nictytan · 16 points · Posted at 02:03:32 on June 12, 2016 · (Permalink)*

You can't. But you can run JavaScript, which can alter CSS.

[deleted] · 17 points · Posted at 07:30:33 on June 12, 2016 · (Permalink)

You can't. But you can run JavaScript, which can alter CSS.

ftfy

nictytan · 2 points · Posted at 13:25:53 on June 12, 2016 · (Permalink)

Whoops, thanks.

ProgramTheWorld · 3 points · Posted at 02:29:44 on June 12, 2016 · (Permalink)

You can by adding a style tag.

ping_less · 9 points · Posted at 09:01:14 on June 12, 2016 · (Permalink)

Oh, how the tables turn...

GetOutOfJailFreeTard · 1 points · Posted at 14:22:50 on June 12, 2016 · (Permalink)

*How the turn tables...

gifv-bot · 7 points · Posted at 20:58:40 on June 11, 2016 · (Permalink)

GIFV link

^I ^am ^a ^bot. ^FAQ ^// ^code

yammajr · 13 points · Posted at 05:07:32 on June 12, 2016 · (Permalink)

I'm not sure what's wrong with using tables. When you have tabular data, it totally makes sense to put it in a gasp table.

The problem comes from using tables for page layout. That's a crime and should be treated severely.

Amusing, none the less.

Laugarhraun · 4 points · Posted at 12:44:44 on June 13, 2016 · (Permalink)*

TBH there was a time (10+ years ago?) when it was the best way to get the style you wanted, and its rendering was pretty consistent.

o11c · 1 points · Posted at 02:00:28 on June 14, 2016 · (Permalink)

To be fair, the whole "HTML is semantic" thing isn't really true.

TheDitonation · 7 points · Posted at 21:34:02 on June 11, 2016 · (Permalink)

... But how?

S0PH0S · 6 points · Posted at 21:49:19 on June 11, 2016 · (Permalink)

Can we have the JS code?

🎙️ jj4th · 25 points · Posted at 22:02:28 on June 11, 2016 · (Permalink)*

The code is embarrassingly hackish. I'm too lazy to add the css rules myself, so I just import font-awesome from a CDN. Oh and of course, the bookmarklet is named: (╯°□°)╯︵ ┻━┻

javascript:link=document.createElement('link');link.rel='stylesheet';link.type='text/css';link.href='https://goo.gl/STSGxp';document.getElementsByTagName('head')[0].appendChild(link);function toggleSpin(){for(var elem of document.querySelectorAll('table')){elem.classList.toggle('fa-spin')}}toggleSpin();setTimeout(toggleSpin,2000);

caagr98 · 17 points · Posted at 22:23:39 on June 11, 2016 · (Permalink)

If anyone wants a table to test with, here you go.

Foo	Bar	text	text
Foo	Bar	text	text
text	text	text	text
text	text	text	text
text	text	text	text
text	text	text	text
text	text	text	text

hmmwhatsthisdo · 17 points · Posted at 01:40:21 on June 12, 2016 · (Permalink)

link.href='https://goo.gl/STSGxp'

Sneaky way of tracking that, I must say.

[deleted] · 2 points · Posted at 09:23:03 on June 12, 2016 · (Permalink)

[deleted]

[deleted] · 3 points · Posted at 09:37:46 on June 12, 2016 · (Permalink)

https://goo.gl tracks clicks. It's more likely just for the shorter url though.

🎙️ jj4th · 1 points · Posted at 03:55:25 on June 13, 2016 · (Permalink)

That's exactly why, I don't like long URLs. I didn't even realize it tracked clicks.

Howzieky · 1 points · Posted at 01:27:45 on June 12, 2016 · (Permalink)

How does one implement this?

borick · 2 points · Posted at 01:49:26 on June 12, 2016 · (Permalink)

You can just paste it in your URL with this page open, javascript: has to be at the very front.

youwillnevercatme · 3 points · Posted at 13:07:03 on June 12, 2016 · (Permalink)

ELI5: Why everyone hates tables?

lindell92 · 9 points · Posted at 15:36:19 on June 12, 2016 · (Permalink)

Tables are not bad. But using tables to create a layout in HTML is. If you do that you are locked into into having a specific structure of the website and creating things like a responsive website is really hard.

But when presenting data (like in the W3C examples in the image) it is a good tool

[deleted] · 3 points · Posted at 21:18:48 on June 12, 2016 · (Permalink)

A few bad websites to test this on (pulled from Webpages That Suck).

http://www.preteristarchive.com/

http://www.libertyvan.com/home/

http://spotmetering.com/

http://www.exmouth-view.co.uk/

jaxklax · 1 points · Posted at 01:10:54 on June 12, 2016 · (Permalink)

obligatory

rasori · 1 points · Posted at 04:07:41 on June 12, 2016 · (Permalink)

I don't know what's worse, that I like this or that I actually see places where it could be useful in my day job...

wooboy · 1 points · Posted at 21:58:39 on June 12, 2016 · (Permalink)

As much as I don't like the incorrect usage of tables in html, I absolutely detest using html Select elements. They're basically impossible to style without using JavaScript to make a faux drop down and hiding the real Select element.

Relevant_Monstrosity · 1 points · Posted at 22:46:09 on June 12, 2016 · (Permalink)

Have you worked with the shadow dom?

http://www.html5rocks.com/en/tutorials/webcomponents/shadowdom-201/

supnul · 1 points · Posted at 18:34:01 on June 16, 2016 · (Permalink)

Y U NO DIV/SPAN ?

isistitties · 0 points · Posted at 12:11:48 on June 12, 2016 · (Permalink)

w3schools

How I cope with HTML tables.

HTML Tables