This is an example of the tbrowser() function. See the table in its own webpage.
Hit Reload to display a different dataset.
Last active
November 21, 2019 05:24
-
-
Save badosa/ed9665503abec4f542d1 to your computer and use it in GitHub Desktop.
tbrowser() example
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <link rel="stylesheet" type="text/css" href="/d/ed9665503abec4f542d1/style.css"> | |
| <script type="text/javascript" src="/d/c34d7392cf9c8cec201e/geturl.js"></script> | |
| <script src="https://cdn.jsdelivr.net/combine/npm/jsonstat@0.13.13,npm/jsonstat-utils@2.5.5"></script> | |
| </head> | |
| <body> | |
| <div id="tbrowser">Connecting to a random dataset...</div> | |
| <script type="text/javascript"> | |
| JSONstat( | |
| getURL(), | |
| function(){ | |
| JSONstatUtils.tbrowser( | |
| this, | |
| document.getElementById("tbrowser"), | |
| { | |
| tblclass: "tbrowser", | |
| preset: "smaller", | |
| status: true | |
| } | |
| ); | |
| } | |
| ); | |
| </script> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| * { | |
| font-family: verdana; | |
| font-size: 12px; | |
| } | |
| .tbrowser { | |
| width: 100%; | |
| border: 1px solid #ccc; | |
| background-color: #fff; | |
| } | |
| .tbrowser caption, .tbrowser tfoot td { | |
| text-align: left; | |
| color: #fff; | |
| background-color: #666; | |
| } | |
| .tbrowser legend { | |
| color: #fff; | |
| } | |
| .tbrowser caption .label { | |
| display: block; | |
| padding: 3px 3px 8px 3px; | |
| font-size: 14px; | |
| } | |
| .tbrowser caption form, | |
| .tbrowser tbody th { | |
| white-space: nowrap; | |
| } | |
| .tbrowser caption strong { | |
| font-weight: normal; | |
| padding: 2px; | |
| border: 1px solid #ddd; | |
| color: #ddd; | |
| } | |
| .tbrowser select { | |
| padding: 2px; | |
| } | |
| .tbrowser caption a { | |
| cursor: pointer; | |
| text-decoration: none; | |
| color: #fff; | |
| font-size: 26px; | |
| font-weight: bold; | |
| line-height: 0; | |
| vertical-align: sub; | |
| } | |
| .tbrowser caption, .tbrowser th, .tbrowser td { | |
| padding: 6px; | |
| } | |
| .tbrowser th { | |
| text-align: left; | |
| background-color: #ccc; | |
| } | |
| .tbrowser thead th { | |
| text-align: center; | |
| } | |
| .tbrowser td { | |
| text-align: right; | |
| background-color: #eee; | |
| } | |
| .tbrowser fieldset { | |
| padding: 10px; | |
| margin-bottom: 10px; | |
| } | |
| .tbrowser p { | |
| margin: 0 0 5px 4px; | |
| } | |
| .tbrowser p:last-of-type { | |
| margin-bottom: 0; | |
| } | |
| .tbrowser tbody tr:hover th, .tbrowser tbody tr:hover td { | |
| background-color: #bbb; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment