Spreadsheet like web form
In some cases, at edit database record, it is usefull to see also data from neighbouring records, eventually to see complete database table. For example, when edit capacity standards for new product type fits to see older, already checkout data. Or else, when editing technological procedure in application Mould and Tools it is desirable to see whole techological procedure description when edit one suboperation. Some simple tables, typically codebooks, are as well suitable for editing with help of this form type.
In principle, complete table is displayed at first. By click on specific row, edit form opens only for this one row. Form is visual part of table and such method of editing could remind the work with spreadsheet. I call that inline editing.
Example form here is not fully interactive (form keeps open on default row, it is not possible to select other row, edited data are not saved). The purpose of this live form is illustration how to display tabular and form data in one common table and keep maximum uniform appearance in various browsers.
Table data and form data are more or less justified on the left and also on the right. In some browsers is noteless one pixel drift in the content of form fields relative to the table data.
The width of all input fields is set by the same style width: 100% padding: 0; regardless of actual width of input field. In IE and Opera browsers that style causes error type of disappearing text cursor in the right side of input box. Try delete and type in text in the column name pers. num. and follow the text cursor in the right side.
Text cursor error can be corrected by padding: 0 1px 0 0; but setting width: 100%; can not be used then. This is a disadvantage of the W3C box model. In traditional box model the width property determines the overall width dimension including padding. Then it is possible to set width: 100%; padding: 0 4px; for all input fields regardless of actual width and all input fields perfectly fit into any table cell.
Solution is to define class for each table column and class for each input fields (including the width specified). This is quite a lot of classes, a lot of calculating and flexibility of solution is lost. Another option is to wait for widespread of CSS3 property box-sizing.
In real application, after form submitting and data saving, server returns the same, updated table to enable editting next row. It is convenient to set background color of last edited row for easy backward verification of entered data. Sometime it is good to extend form by auxiliary button for edit mode quit (close form), in case of need also button for record delete. In codebook, where it is not possible to delete records, form element <input type="checkbox"> can be used to switch record's active status.
Table formatting and row cursor are described in article table and CSS.
<style type="text/css">
/* ---- table ----- */
table, input {font: normal 13px Arial, SansSerif, Verdana;}
table {
border: 0;
border-left: 1px solid #aaa;
border-top: 1px solid #aaa;
table-layout: fixed;
width: 500px;
}
th, td {
border: 0;
border-right: 1px solid #aaa;
border-bottom: 1px solid #aaa;
}
th {
background: url(/at/files/bg_table.png);
font-weight: normal;
border-left: 1px solid #cff;
border-right: 1px solid #358;
}
td {text-align: center; padding: 0 4px; margin: 0;}
.tdL {text-align: left;}
.tdR {text-align: right;}
/* ------- form -------- */
td.inp {background: #ffa;}
.iL, .iR, .iC {width: 100%; margin:0; border:0; padding: 0;
background: #ffa; float: left;}
.iL {text-align: left;}
.iR {text-align: right;}
.iC {text-align: center;}
.ok {width: 13px; height: 14px; margin: 0; border: 0;}
</style>
Long page
The spreadsheet like form works in the following way:
- 1. request server to open form in specified row. Modified table including form is returned.
- 2. request server to save modified data. Table including new data (without form) is returned.
As far as the table height exceeds the high of browser, vertical position of scroll bar have to be retained in order to keep page in the same vertical position. Otherwise we would have to move vertical scroll bar and search open form, or just modified row.
Following script returns top position of vertical scroll bar. This value is saved by validation script to hidden form field before submit to server. Server returns the position of vertical scroll bar in the statement for page scrolling onload="scrollTo(...)" in body element.
<script type="text/javascript">
...
function topSL() {
if (window.innerHeight) {
return window.pageYOffset; // FF
}
else if (document.documentElement && document.documentElement.scrollTop) {
return document.documentElement.scrollTop; // IE
}
else if (document.body) {
return document.body.scrollTop;
}
return 0;
}
</script>
<body onload="scrollTo(0, 245)">
...
</body>
updated 25.12.2007