Menu

Main

Sean Cusack

JQuery Grid Paste

OVERVIEW

This plugin captures tabular data pasted into input fields that are part of tables, and sends the data to the appropriate sibling inputs, mimicking the very basic functionality of pasting a block of cells in Excel.

INSTALLATION

  • Copy jquery-gridpaste.js or any specific or minified version of jquery-gridpaste(-x.x.x)(.min).js into your javascript directory
  • Make sure that jquery 1.5.2 or later is somewhere accessible
  • Make sure that jquery-caret 1.02 or later is somewhere accessible
  • Make sure that jquery-catchpaste 1.0.0 or later is somewhere accessible
  • Load jquery-gridpaste and its dependencies:
    • <script src="jquery-1.5.2.min.js"></script>
    • <script src="jquery-caret.1.02.min.js"></script>
    • <script src="jquery-catchpaste-1.0.0.js"></script>
    • <script src="jquery-gridpaste-1.0.0.js"></script>
  • After that, a new $(selector).gridpaste() feature is available

BASIC USAGE

Just apply gridpaste to any inputs that you want to handle the new paste functionality. It will find the closest outer table automatically, and all the surrounding th's and td's with either inputs or textareas in them. No other tags are supported, nor are thead nor tfoot portions of tables.

$("table.mymagictable input").gridpaste()

CAVEATS

This assumes that all tabular data is left-rectified, and that there are no empty cells on lines of their own. Think about parsing rows separated by newlines, and each of them separated by tabs.

You can grab a square block of things that's missing the last item on a line or two, no problem. But if the first line "starts" on the third column, and then you paste, by the time it gets to the target to paste, there's no information left to say that it starts "on the third column for just that line". Try a few non-square chunks in the example.

MORE CAVEATS

See JQuery CatchPaste.