The goal for this tutorial is to document how to reproduce very simple grid functionality using html, css, javascript, and perhaps some xmlhttprequest.  Following are the features to be implemented:

This used to be called a spreadsheet tutorial, but some of the defining characteristics of spreadsheets (e.g. formulae, selecting multiple cells at a time) aren't necessarily going to be implemented.  Note that regardless of whether one is constructing a grid or a spreadsheet, the information available here should be of help.

Editing via Roving Textbox

One might be tempted to implement a grid by simply placing a textbox (<input type="text" />) in every cell of a <table>.  However, web browsers get sluggish when there are many controls on the screen.  Therefore, one textbox will be used, and only made visible when a cell is being edited.  The document's onclick event is wired up to a function that detects whether an editable cell has been clicked; if so, it highlights the cell.  If one starts editing the cell (when F2 is pressed, the cell is double clicked, or certain keys are pressed), a textbox is inserted into the cell.  Hence, the term roving textbox.

Freeze Pane Ideas

Freeze panes are simply rows/columns which do not move when the grid is scrolled vertically/horizontally, respectively.  In IE it is fairly easy, due to the ability to use javascript for CSS values in IE via expression().  Unfortunately, td.text {position: relative; left: -10px;} will only work on the table below in IE, which means that we can't just wire up the Scroll event of a containing div and continually update left with scrollLeft/Top in Firefox.  It is possible to freeze just column headers fairly easily in a cross-browser compatible fashion.

In Development

This tutorial is in active development.  This means it doesn't do everything the introduction says it will do.  It also means that any help would be greatly appreciated; here is my contact info.


Please let me know about anything that's incorrect.


Support Tutorials like This

If you found this tutorial helpful, please link to it.  If you really want to show your appreciation... :-)


Project-task60000-001 60000-002 60000-003 
EmployeeTotalHours Fcst
Bob16  16
total line12  12
Chris105 105