load a tablelistjs html list

A Scrollable, Selectable HTML Table with JavaScript and CSS

51225 VIEWS

·

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.

 

<% if ( matters != null ) { for ( int i = 0; i < clients.length; i++ ) { Client client = Clients.getClient(clients[i].clientID); BankAccount account = Accounts.getAccount(clients[i].accountID); // Need to format balance as dollars out.println(""); out.println(""); out.println(""); String balanceStr = nf.format(account.balance); out.println(""); out.println(""); out.println(""); } } %>

Client Account Client Name Account Balance
" + clients[i].name + " " + client.last + ", " + client.first + " "+ balanceStr +" Modify


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

entries on the page, looking for the ones marked with the classname TableListJS. Once found, JavaScript onmouseover(), onmouseout()and onmousedown()functions are added for each table rowentry. The first two functions toggle the row class to set or unset the CSS “highlight” color respectively. The onmousedown() function handles mouse clicks, setting the class to “clicked” and storing the selection in the global select variable when selected. Also, if a previous row was selected, its “clicked” state is cleared. Alternatively, if the row is already marked as “clicked”, its “clicked” state is cleared to unselect it.Using TableListJS, and Future EnhancementsNote that the sample HTML page that uses this code includes an addRow() function and window.onload() implementation that adds a set of entries to the table. This function includes a call to tableHighlightRow() to initialize the rows’ mouse handlers. If you don’t use the sample addRow()JavaScript code as shown, you’ll need to initialize the list when either the table’s entries or the page is loaded, as in the following:window.onload=function(){ tableHighlightRow(); }Hopefully you find this TableListJS HTML component (available for download here) as useful as I have. In future blogs, TableListJS will be enhanced further to include searching and filtering, with inline editing, and persistence added.

Eric Bruno is a contributing editor to multiple publications with more than 20 years of experience in the information technology community. He is a highly requested speaker and writer for topics spanning the technology spectrum, from mobile to the data center. Eric is a regular contributor at Fixate IO.


Discussion

Leave a Comment

Your email address will not be published. Required fields are marked *

Menu
Skip to toolbar