How can I make a web-based "table" select like a spreadsheet? (rectangular area vs row-wrap selection)

Question

I want to make a table that displays on a webpage, but one requirement is to make it easy to copy and paste into a spreadsheet. Normal HTML tables selection behavior is obviously different from how a spreadsheet like Excel selects -- when you select multiple rows it wraps around instead of selecting a rectangular area. Is there any way to make HTML table behave like a spreadsheet in this regard, or is the only way to resort to a Flash table or something similar?

Answer 1

No easy solution comes into my mind. You could...

1. Make rectangular "fake selection" over the table using mousedown/up events.
2. With javascript, parse values of selected cells into CSV structure.
3. Send the CSV data to server via ajax and have the server send it back to you as CSV file with proper HTTP headers.
4. Now you can import the downloaded CSV file into Excel.

Ugly? Oh yeah.

Answer 2

Google Docs manages it, so it is possible. You'll need to fake it. Something like the following:

• Prevent normal text selection
• Use mouse events to detect the first cell the user selected and the most recent cell entered, and apply selection-like styling to the rectangle of cells with those cells as opposite corners
• The tricky part is allowing the user to copy the fake selection, since when the user does a copy (either via the keyboard or the browser edit or context menus), the real selection will be empty. What you could do is copy the selected cells into a table hidden off-screen (using a large negative value for CSS left, for example) when the selection changes and have the real selection always surrounding the off-screen table.

Answer 3

I would hack the Jquery Plugin Tablesorter:

http://tablesorter.com/docs/

Answer 4

It's not a real solution, but I think it should be mentioned:

Firefox supports this kind of selection on a HTML table by holding down the Control key while click-dragging the mouse.