We’ve all seen what a standard–and boring–HTML table looks like (see Figure 1). Sure, you can adjust the border size and style, and even use cascading style sheets (CSS) to spiff it up, but its utility is limited. For a web application I recently built, I needed a multi-column scrollable list, within which I could select an entry as part of an input form. I knew a basic HTML table wouldn’t fit the bill, so I changed it.
Figure 1 – A boring old HTML Table.
To achieve what I wanted, I used a combination of CSS and some JavaScript (see Figure 2). The result has been well-received by users, and has proven very easy to use, and still quite flexible. Three of its most important features (among others) include the ability to scroll the entries within a table of a fixed size, a highlight that tracks the mouse as you hover over the rows (in a lighter grey color), and the ability to select a row with the mouse (shown in a darker grey color).
Figure 2 – The improved and exciting TableListJS HTML Table.
Any list is useless without entries. You can load the TableListJS component’s entries multiple ways, starting with static HTML code, as shown in Listing 1.
| Column 1 | Column 2 | Column 3 |
| Entry 1 | Entry 2 | Entry 3 |
Listing 1 – Add entries to TableListJS like a normal HTML table.
Alternatively, you can load the entries dynamically with code, such as JavaScript (see Listing 2), or JavaServer Pages (JSP) embedded Java code (see Listing 3).
Listing 2 - Using JavaScript to dynamically load a TableListJS HTML list.
You can even mix any combination of these methods, as illustrated in the complete example code, downloadable here.
Listing 3 - Using JavaServer Pages to load a TableListJS HTML list.
The result of this code (with some silly sample test data) can be seen in Figure 3 below.
Figure 3 - A TableListJS custom HTML list loaded with JSP code.
As illustrated, you can embed links as column entries, extending the usefulness of the list even more. Let’s explore how the TableListJS custom HTML component works.
It Starts with CSS
About half of the functionality you see in TableListJS is implemented in a small amount of CSS code (see Listing 4). Using CSS means that all of the entries in this file can be customized to match your site’s styling.
table {
background-color: #fd9;
}
tbody {
background-color: #fff;
height: 150px;
overflow: auto;
}
td {
padding: 3px 10px;
}
thead > tr, tbody{ display:block;}
#entries tr.clicked { background: #ccd; }
#entries tr.highlight { background: #eef; }
Listing 4 - Table scrolling, mouse hover-based highlighting, and selections are set here.
By setting the table row entry (indicated by the
HTML ) to either “clicked” or “highlight,” the specified color is applied to the row’s background. This part is controlled by JavaScript code (discussed below), but the styles and colors are defined here. Setting the height of the table to a fixed size (150 pixels by default in the CSS), the table becomes scrollable once the pixel height of the entries exceeds this value.
You can override any of these entries in your HTML code to tweak for specific lists as you choose. For example, to change the default table height from 150 pixels to, say, 300 pixels, change the table’s tbody entry:
Next: The Magic of JavaScript
The JavaScript code (completely shown in Listing 5) tracks the mouse movement in order to set the hover color (which adds a nice effect), and to indicate a selection when a row is clicked on. Clicking on the selected row a second time unselects it, and returns its colors to normal.
var selected = null;
function tableHighlightRow() {
if (document.getElementById && document.createTextNode) {
var tables=document.getElementsByTagName('table');
for ( var i=0; i<tables.length; i++ ) {
if ( tables[i].className==='TableListJS' ) {
var trs=tables[i].getElementsByTagName('tr');
for ( var j=0; j<trs.length; j++) {
if (trs[j].parentNode.nodeName==='TBODY') {
trs[j].onmouseover=function(){
// 'highlight' color is set in tablelist.css
if ( this.className === '') {
this.className='highlight';
}
return false
}
trs[j].onmouseout=function(){
if ( this.className === 'highlight') {
this.className='';
}
return false
}
trs[j].onmousedown=function(){
//
// Toggle the selected state of this row
//
// 'clicked' color is set in tablelist.css.
if ( this.className !== 'clicked' ) {
// Clear previous selection
if ( selected !== null ) {
selected.className='';
}
// Mark this row as selected
this.className='clicked';
selected = this;
}
else {
this.className='';
selected = null;
}
return true
}
}
}
}
}
}
}
Listing 5 - This code turns an HTML table into a scrollable list with multiple columns.
First, the code iterates through all of the
