| 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. |
|
-
IE 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
|
|
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 |
|
|
|
- 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.
|
|
|
Download the .zip file containing everything
here |
|