Software > Table Indexer

Table Indexer - 1.0.0

This Prototype extension was written for usability. Sometimes, when editing tabulated data, it makes sense for the tab index to go horizontally (the default browser behaviour), so you can edit each field in a row, row by row. Other times, it's more intuitive to edit the data vertically - updating the values in a table, column by column. This module was written to do exactly that: it lets the user toggle between horizontal and vertical tab indexing.

Example

Here's a quick example. Try clicking on one of the fields in the form then click tab to go to the next field. Then, switch the tab index from "horizontal" to "vertical" and try again. Get the idea?

Tab Index:



Name Gender Email Dropdown Comments





Usage

Using the script is real easy. First, after including the prototype library (which you can download from here), include the Table Indexer extension. This is done like so: 

<script type="text/javascript" src="prototype.tableindexer.js"></script>

Next, (still) in your <head>, initialize the object. 

<script type="text/javascript">
/* <![CDATA[ */
var TI;
Event.observe(window, "load", function() {
  TI = new TableIndexer({
    formId:  "mass_edit_form",
    tableId: "mass_edit_table"
  });
});
/* ]]> */
</script>

The formId and the tableId parameters are required (Note that it's Id not ID - like document.getElementById). They identify the form and the table to which you apply the Table Indexer.


Optional Parameters

There's a couple more parameters for a little customizability: 

<script type="text/javascript">
/* <![CDATA[ */
var TI;
Event.observe(window, "load", function() {
  TI = new TableIndexer({
    formId:          "mass_edit_form",
    tableId:         "mass_edit_table",
    defaultDir:      "horizontal",       // horizontal / vertical
    defaultTabIndex: 3,               // the default tab index for the first field in the form
  });
});
/* ]]> */
</script>

Download