Released: 12/27/2004
Basic Description:
Script allows users to; insert rows left or right of the selected cell, insert columns left or right of a selected cell, or delete selected rows or columns in a table.  Script will work for multiple tables and tables within tables (infinitely).  Only requires that tables are wrapped by a content editable DIV.
Features List:
  • Internet Explorer BrowserIE 5.5+ ONLY
  • Good for infinite number of tables
  • No code is required to be within table elements
  • Tables within tables are supported  (hint: below try moving a table inside a table and using the functions on either table)
  • Tables are control selectable (movable, resizable, etc)
  • Supports elements inside cells such as <span>
  • Activated cells highlight for the users reference
Demonstration of Code:

Content Editable DIV
row 0 cell 0 row 0 cell 1 row 0 cell 2
row 1 cell 0 row 1 cell 1 row 1 cell 2
row 2 cell 0 row 2 cell 1 row 2 cell 2

row 0 cell 0 span tag row 0 cell 2
row 1 cell 0 row 1 cell 0 row 1 cell 2
row 2 cell 0 row 2 cell 1 row 2 cell 2

row 0 cell 0 row 0 cell 1 row 0 cell 2
row 1 cell 0 row 1 cell 1 row 1 cell 2
row 2 cell 0 row 2 cell 1 row 2 cell 2
Code considerations:
  • ALL Tables must be "wrapped" or contained by a SINGLE ContentEditable DIV with style='overflow: auto' included
  • DIV must have two event handlers embedded (see HTML code) - event handlers were added (although not necessary at this time) to make sure that context menu actions can only happen when cursor is over DIV - done for future versions.
  • Source code is commented but not heavily
  • Future version will include cell style cloning so check back here again
  • Tables must have symmetry, that is, all rows must contain same number of cells and all columns must contain the same number of cells.
Get the Code:
Download the .zip file containing everything here
Top of Page

Valid HTML 4.01!

Views: 9273

Valid CSS!