Previously... React and tables. I've been meaning to improve a little on the table example built with React and a post by Steve was the final push. He shared his "ActiveTable" bookmarklet.
以前... React和table 。 我一直想在用React构建的表示例上做一些改进，最后由Steve发表 。 他分享了他的“ ActiveTable”书签。
So, introducing a bookmarklet to make it easier to work with random HTML tables you come across...
因此，引入书签可以使您遇到的随机HTML表更容易使用...
ReActiveTable
ReActiveTable
Drag this link to your bookmarks, then find a page that has data in tables, for example this one. Click the bookmarklet and get a "pop" button atop of each table.
将此链接拖到您的书签中，然后找到一个表中包含数据的页面，例如this 。 单击小书签，并在每个表的顶部获得一个“弹出”按钮。
This button copies the table into a new overlay that lets you fiddle with the data in the table, namely...
此按钮将表格复制到新的叠加层中，使您可以摆弄表格中的数据，即...
Sort.
分类。
Filter as-you-type.
根据您的输入进行过滤。
Edit (double click a cell, type, Enter).
编辑(双击单元格，键入，按Enter)。
Download the data in CSV and JSON.
下载CSV和JSON中的数据。
Codez (Codez)
As usual, working with React was a pleasure. All you do is mess up with the data (just array methods: sort(), filter(), reduce()) and let React deal with the rendering stuff. All this functionality came at about 140 lines of code, available here.
像往常一样，与React合作很愉快。 您要做的只是弄乱数据(只是数组方法： sort() ， filter() ， reduce() )，然后让React处理渲染内容。 所有这些功能来自大约140行代码， 可在此处找到 。
The messier part is the bookmark part - working with the old school DOM (to extract data from random tables) and writing iframes and styles and scripts. It's right here.
信息接收器部分是书签部分-与旧式DOM(从随机表中提取数据)一起工作，并编写iframe，样式和脚本。 就在这里
覆盖 (Overlay)
The idea about the overlay was inspired by Safari's Reader functionality (I recently looked at it).
关于覆盖层的想法是受Safari的Reader功能(我最近看过它 )启发的。
Made me wonder if this thing - being able to play with tabular data found in pages - should be a standard feature built into browsers? Limited audience, maybe, but still convenient.
让我怀疑这件事-能够处理页面中找到的表格数据-是否应该成为浏览器内置的标准功能？ 听众虽然有限，但仍然很方便。
Tell your friends about this post on Facebook and Twitter
在Facebook和Twitter上告诉您的朋友有关此帖子的信息