index.rfcish

   <link href=https://chrome.google.com/webstore/detail/nbcoeiihmfepcagkdeoodgnegkddcpop rel=chrome-webstore-item>
   <link href=bootstrap.min.css rel=stylesheet>
   <link href=style.css rel=stylesheet>

   <meta content="Select data in tables the same way you select cells in a spreadsheet." name=description>
   <meta content="Jack Bates" name=author>

                             Cellect

   <div class=container>

   <p class=lead>Helps you select data in tables the same way you
   select cells in a spreadsheet.

   It's:

   o  [A JavaScript][1] you can install in your web page,

   o  [A bookmarklet][2] you can run on any page,

   o  A Greasemonkey [user script][3] and a [Chrome extension][4].


1.  Screencast

   <iframe allowfullscreen frameborder=0 height=360 src="http://www.youtube.com/embed/qyJOVXiksws?feature=player_detailpage" width=640>


2.  Demo

   <table class="table table-bordered table-condensed table-striped">
      <thead>
      <tr><th>First Name</th><th>Last Name</th><th>Job Title</th><th>
         Favorite Color</th><th>Wars or Trek?</th><th>Porn Name</th>
         <th>Date of Birth</th><th>Dream Vacation City</th><th>GPA
         </th><th>Arbitrary Data</th></tr>
   </thead><tbody>
      <tr><td>James</td><td>Matman</td><td>Chief Sandwich Eater</td>
         <td>Lettuce Green</td><td>Trek</td><td>Digby Green</td><td>
         January 13, 1979</td><td>Gotham City</td><td>3.1</td><td>
         RBX-12</td></tr>
      <tr><td>The</td><td>Tick</td><td>Crimefighter Sorta</td><td>Blue
         </td><td>Wars</td><td>John Smith</td><td>July 19, 1968</td>
         <td>Athens</td><td>N/A</td><td>Edlund, Ben (July 1996).</td>
         </tr>
      <tr><td>Jokey</td><td>Smurf</td><td>Giving Exploding Presents
         </td><td>Smurflow</td><td>Smurf</td><td>Smurflane Smurfmutt
         </td><td>Smurfuary Smurfteenth, 1945</td><td>New Smurf City
         </td><td>4.Smurf</td><td>One</td></tr>
      <tr><td>Cindy</td><td>Beyler</td><td>Sales Representative</td>
         <td>Red</td><td>Wars</td><td>Lori Quivey</td><td>July 5, 1956
         </td><td>Paris</td><td>3.4</td><td>3451</td></tr>
      <tr><td>Captain</td><td>Cool</td><td>Tree Crusher</td><td>Blue
         </td><td>Wars</td><td>Steve 42nd</td><td>December 13, 1982
         </td><td>Las Vegas</td><td>1.9</td><td>Under the couch</td>
         </tr>
   </tbody></table>


   <div class=row>

   <div class=span4>

3.  Script

   There are two versions of the script, one that depends on jQuery
   and the other that doesn't:

   o  [jQuery version][1].

   o  [Non-jQuery version][3].

   The jQuery version supports more browsers, whereas the non-jQuery
   version adds less code to each page and is easier to distribute as
   a Chrome extension.  The non-jQuery version invokes web standards
   directly and supports Firefox and Chrome.  It works well as a
   bookmarklet or a user script where, once installed, cross-browser
   support isn't an issue.

   It's also available as a [a jQuery plugin].

   </div>


   <div class=span4>

4.  Bookmarklet

   Bookmark one of these two versions, or drag it to your bookmarks
   toolbar:

   o  jQuery version: [Select tables][2]

   o  Non-jQuery version: [Select tables][5]

   </div>


   <div class=span4>

5.  Greasemonkey

   Here is [a user script][3] for [Greasemonkey][6] or Chrome.

   Install the Greasemonkey [Firefox extension][6], then [install the
   script][3].

   Chrome supports user scripts out of the box, but recent versions
   will [only allow you] to install them from [the Chrome Web
   Store][4] by default.

   You can also [get the script] from Userscripts.org.

   </div>

   </div>


6.  Features

   o  Shift click to extend the selection.

   o  Double click to select rows, columns, or a whole table.

   Currently this is a [minimum product], hopefully it's viable.  No
   work has been done on interaction with colspans or rowspans, or
   interaction with nested tables.

   It doesn't work with PDF documents, but here is a [very cool
   project] that does.

   In future it might:

   o  Support using arrow keys to extend the selection, the way you
      might expect.

   o  Support control click to select irregular regions.

   o  Enable other scripts to add behavior when cells in specialized
      tables are selected.


7.  Why?

   [CRUD] webapps are frequently built for jobs that users previously
   addressed with spreadsheets.  Despite the advantages of webapps,
   venerable spreadsheets still deliver great features and user
   experience.  Hopefully this script improves integration between web
   pages and spreadsheets.  With it you should be able to scrape or
   export any table on the web.

   There are also a lot of other great tools to integrate spreadsheet
   features with webapps:

   o  [DataTables]

   o  [Handsontable]

   o  [jTable]

   o  [jqGrid]

   o  [jui_datagrid]

   o  [ParamQuery]

   o  [SlickGrid]

   o  [table2csv]

   And there is at least one Firefox extension to enhance tables on
   any web page: [TableTools2].  And Firefox lets you select tables
   out of the box, by holding down the control key.

   There are also web-based spreadsheets like [Google Spreadsheet] and
   [SocialCalc].

   Hopefully even more data will get shared in the form of tables.

   </div>

   <a href=https://github.com/jablko/cellect>
   <img alt="Fork me on GitHub" src=https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png style="position: absolute; top: 0; right: 0; border: 0;">
   </a>

   <script src=http://code.jquery.com/jquery.min.js></script>

   <script src=http://selenium.googlecode.com/git/javascript/selenium-core/scripts/htmlutils.js></script>
   <script src=http://selenium.googlecode.com/git/javascript/selenium-core/scripts/selenium-browserbot.js></script>
   <script src=http://selenium.googlecode.com/git/javascript/selenium-core/scripts/selenium-logging.js></script>

   <script src=http://cdn.popcornjs.org/code/dist/popcorn-complete.min.js></script>

   <script src=script.js></script>

   <script async src=http://cellect.disqus.com/embed.js></script>


   [1]         https://raw.github.com/jablko/cellect/master/cellect.js

   [2]         javascript:(function(){document.body.appendChild(document.createElement('script')).src='http://code.jquery.com/jquery.min.js';document.body.appendChild(document.createElement('script')).src='https://raw.github.com/jablko/cellect/master/cellect.js'})()

   [3]         https://raw.github.com/jablko/cellect/master/greasemonkey/cellect.user.js

   [4]         https://chrome.google.com/webstore/detail/cellect/nbcoeiihmfepcagkdeoodgnegkddcpop

   [a jQuery plugin]
               http://plugins.jquery.com/cellect/

   [5]         javascript:(function(){document.body.appendChild(document.createElement('script')).src='https://raw.github.com/jablko/cellect/master/greasemonkey/cellect.user.js'})()

   [6]         https://addons.mozilla.org/en-US/firefox/addon/greasemonkey/

   [only allow you]
               http://support.google.com/chrome_webstore/answer/2664769

   [get the script]
               http://userscripts.org/scripts/show/165121

   [minimum product]
               http://en.wikipedia.org/wiki/Minimum_viable_product

   [very cool project]
               http://tabula.nerdpower.org/

   [CRUD]      http://en.wikipedia.org/wiki/Create,_read,_update_and_delete

   [DataTables]
               http://datatables.net/

   [Handsontable]
               http://handsontable.com/

   [jTable]    http://jtable.org/

   [jqGrid]    http://www.trirand.com/blog/

   [jui_datagrid]
               http://www.pontikis.net/labs/jui_datagrid/

   [ParamQuery]
               http://paramquery.com/

   [SlickGrid]
               https://github.com/mleibman/SlickGrid

   [table2csv]
               http://table2csv.com/

   [TableTools2]
               http://mingyi.org/TableTools2/

   [Google Spreadsheet]
               http://docs.google.com/spreadsheet

   [SocialCalc]
               https://github.com/DanBricklin/socialcalc