YUI Library Examples: DataTable Control: Highlighting Cells, Rows, or Columns

Sample Code for this Example

Data:

CSS:

Markup:

JavaScript:

YAHOO.util.Event.addListener(window, "load", function() {
    YAHOO.example.Highlighting = new function() {
        var myColumnDefs = [
            {key:"Page"},
            {key:"VisitsThisMonth"},
            {key:"VisitsThisYear"},
            {key:"ViewsThisMonth"},
            {key:"ViewsThisYear"}
        ];

this.myDataSource = new YAHOO.util.DataSource(YAHOO.example.Data.webstats);
        this.myDataSource.responseType = YAHOO.util.DataSource.TYPE_JSARRAY;
        this.myDataSource.responseSchema = {
            fields: ["Page","VisitsThisMonth","VisitsThisYear","ViewsThisMonth","ViewsThisYear"]
        };

this.cellHighlightDataTable = new YAHOO.widget.DataTable("cell",
                myColumnDefs, this.myDataSource, {
                    caption:"Example: Cell Highlighting"
                });
        // Enable cell highlighting
        this.cellHighlightDataTable.subscribe("cellMouseoverEvent", this.cellHighlightDataTable.onEventHighlightCell);
        this.cellHighlightDataTable.subscribe("cellMouseoutEvent", this.cellHighlightDataTable.onEventUnhighlightCell);

this.rowHighlightDataTable = new YAHOO.widget.DataTable("row",
                myColumnDefs, this.myDataSource, {
                    caption:"Example: Row Highlighting"
                });
        // Enable row highlighting
        this.rowHighlightDataTable.subscribe("rowMouseoverEvent", this.rowHighlightDataTable.onEventHighlightRow);
        this.rowHighlightDataTable.subscribe("rowMouseoutEvent", this.rowHighlightDataTable.onEventUnhighlightRow);

this.colHighlightDataTable = new YAHOO.widget.DataTable("column",
                myColumnDefs, this.myDataSource, {
                    caption:"Example: Column Highlighting"
                });
        // Enable Column highlighting
        this.colHighlightDataTable.subscribe("theadCellMouseoverEvent", this.colHighlightDataTable.onEventHighlightColumn);
        this.colHighlightDataTable.subscribe("theadCellMouseoutEvent", this.colHighlightDataTable.onEventUnhighlightColumn);
    };
});

YUI Logger Output:

Note: Logging and debugging is currently turned off for this example.

Reload with logging
and debugging enabled.

YUI Library Examples: DataTable Control: Highlighting Cells, Rows, or Columns

Sample Code for this Example

YUI Logger Output:

DataTable Control Examples:

More DataTable Control Resources: