Posted By

beneberle on 06/18/09

Tagged

Versions (?)

Last Edited at 06/18/09 02:39pm

Statistics

Viewed 605 times

Favorited by 0 user(s)

Related snippets

Table actions plug-in v0.8 by frequency-decoder.com

/ Published in: JavaScript

- a javascript for alternate row/column table striping
- supports row hover, column hover and cell hover effects and click events.
demo here:
http://www.frequency-decoder.com/demo/table-actions/

Highlighted TextExpand

/* Javascript File

Table actions plug-in v0.8 by frequency-decoder.com

Released under a creative commons Attribution-ShareAlike 2.5 license (http://creativecommons.org/licenses/by-sa/2.5/)

Please credit frequency decoder in any derivative work - thanks

You are free:

* to copy, distribute, display, and perform the work
        * to make derivative works
        * to make commercial use of the work

Under the following conditions:

by Attribution.
                --------------
                You must attribute the work in the manner specified by the author or licensor.

sa
                --
                Share Alike. If you alter, transform, or build upon this work, you may distribute the resulting work only under a license identical to this one.

* For any reuse or distribution, you must make clear to others the license terms of this work.
        * Any of these conditions can be waived if you get permission from the copyright holder.

NOTE: Parts of this script is based on a script originally developped by the veritable Richard Cornford (http://www.litotes.demon.co.uk/example_scripts/tableHighlighter.html)

-----------*/

/*
Zebra striping

To zebra stripe every alternate table row, just give the table a className of the form rowstylealt-XXX where XXX represents the className to give each alternate row, for example; giving the table a className of rowstylealt-alt will give each alternate row the class alt.
i.e...

<table class="rowstylealt-bluetr".....

with a style: 
.bluetr {background:#e8f7ff;}

Row Highlighting

To highlight the current row i.e. the row the mouse is currently hovering over; just give the table a className of the format rowstylehover-XXX, where XXX represents the class that will be given to the current cellâ€™s parent TR node.

Column Highlighting

To highlight the current column, just give the table the className colstylehover-XXX, where XXX represents the class that will be given to each node within the current column scope.

Highlighting the â€œcurrentâ€ cell

To highlight the current cell, just give the table a className of the format cellhover-XXX, where XXX represents the className that will be given to the current cell.

Row selection

To enable users to click on a row in order to â€œselectâ€ it, just give the table a className of the format rowselect-XXX, where XXX represents the class to give the current cellâ€™s parent TR node after the click event has fired.
Multiple row selection

Whenever the Shift key is held down, users can click and drag the mouse pointer in order to select multiple rows simultaneously. The callback function will be called on the selection of each new row and not just when the drag action has stopped.
Disabling text selection in Internet Explorer

Iâ€™ve currently hijacked Internet Explorerâ€™s proprietary onselectstart and ondrag events in order to stop the selection of text during the drag action. If other applications are also using these events, you may have to tweak the code to stop it from overwriting handlers already set for these eventsâ€¦ and yes, I know hijacking events using old-school methods is wrong.
Single row selection only

Should you wish that only one table row can be selected at a time, give the table the class rowselectsingle. This, of course, means that holding the Shift key to select multiple rows will not work.
The callback function

Enabling users to select table rows is rather dull if nothing can be done with the userâ€™s selection. To this end, the script enables you to define a reference to a JavaScript callback function (or Object method) that is itself passed an Object detailing the table, the cell clicked, the row clicked, the action to be taken (i.e. add or remove the row from the list of currently selected rows) and the list of currently selected table rows i.e:

// The following Object is passed to the callback function
 {
      "table":   /* The table */,
      "cell":    /* The cell that was clicked */,
      "row":     /* The row to be added or removed */
      "remove":  /* Are we attempting to remove the row (T/F) */
      "rows":    /* An array of currently selected TR nodes */
 }

The callback function should always return a Boolean value that indicates to the script if it should continue with the add or remove action. This enables you to filter out rows from the selection using bespoke criteria.
Stipulating the callback function

Should you wish to define a specific callback function for the table, just give the table a className of the format rowselectcallback-XXX, where XXX represents the name of the JavaScript function to call after a row has been selected or deselected by the user.
Stipulating an Object.method as a callback function

Should you wish to define an Object method as a callback function, just give the table a className of the format rowselectcallback-XXX, where XXX represents the name of the JavaScript Object method to call after a row has been selected or deselected by the user.

In order to enable the parsing of the â€œ.â€ (dot) Object notation, the XXX className has all â€œ-â€ characters replaced by the â€œ.â€ character, for example; giving the table the className rowselectcallback-anObject-aMethod will mean that the script will attempt to use anObject.aMethod() as the callback function.

An example of defining an Object method in this way can be viewed within the table actions demo. Just look at the source code to see how it was done.
Programmatically clearing selected rows

Should you wish to programmatically remove the userâ€™s selection, just call the method fdTableActions.deselectAllRows, passing in the ID of the table as an argument, for example; calling fdTableActions.deselectAllRows('testTable'); will remove the user selection for the table with an ID of â€œtestTableâ€.

-----------*/

var fdTableActions = {
        tableCache:{},
        init:function() {
                var tables = document.getElementsByTagName("table");
                var rowAlt, colHover, rowHover, rowSelect, rowSelectCallback, cellHover, rowList, rowArr, colObj, elem, rowLength, workArr, celCount, rowSpan, colSpan, cel, colHead, rowL, colL;
                var uniqueID = 0;
                var colspan = "colspan";
                var rowspan = "rowspan";
                /*@cc_on
                /*@if(@_win32)
                colspan = "colSpan";
                rowspan = "rowSpan";
                /*@end
                @*/

for(var k = 0, table; table = tables[k]; k++) {
                        // Grab the className for the alternate rows
                        rowAlt  = table.className.search(/rowstylealt-([\S-]+)/) == -1 ? "" : table.className.match(/rowstylealt-([\S]+)/)[1];
                        // Highlight columns?
                        colHover  = table.className.search(/colstylehover-([\S-]+)/) == -1 ? "" : table.className.match(/colstylehover-([\S]+)/)[1];
                        // Grab the className for the rowStyleHover
                        rowHover  = table.className.search(/rowstylehover-([\S-]+)/) == -1 ? "" : table.className.match(/rowstylehover-([\S]+)/)[1];
                        // Do we select the rows
                        rowSelect = table.className.search(/rowselect-([\S-]+)/) == -1 ? "" : table.className.match(/rowselect-([\S]+)/)[1];
                        // Single or multiple row selection possible
                        rowSelectSingle = table.className.search(/rowselectsingle/) != -1;
                        // Do we have a callback for this table whenever a row is selected?
                        rowSelectCallback = table.className.search(/rowselectcallback-([\S-]+)/) == -1 ? "" : table.className.match(/rowselectcallback-([\S]+)/)[1];
                        // Replace "-" with "." to enable Object.method callbacks
                        rowSelectCallback = rowSelectCallback.replace("-", ".");
                        // Current TH or TD
                        cellHover = table.className.search(/cellhover-([\S-]+)/) == -1 ? "" : table.className.match(/cellhover-([\S]+)/)[1];

// Do we even need to continue?
                        if(!(rowAlt || rowHover || colHover || rowSelect || cellHover)) continue;

// Create a table ID if necessary
                        if(!table.id) table.id = "fdTable-" + uniqueID++;

// Cache this tables details
                        fdTableActions.tableCache[table.id] = { "trCache":[], "rowSelectSingle":rowSelectSingle, "rowSelect":rowSelect, "rowSelectCallback":rowSelectCallback, "lastColCache":[0,0], "rowHover":rowHover, "colHover":colHover };

/*@cc_on
                        @if (@_jscript_version >= 5.7)
                                if(document.compatMode == "BackCompat") fdTableActions.tableCache[table.id].req = true;
                        @else
                                fdTableActions.tableCache[table.id].req = true;
                        @end
                        @*/

/*@cc_on
                        /*@if(@_win32)
                        if(fdTableActions.tableCache[table.id].req) {
                                fdTableActions.tableCache[table.id].lastRow   = null;
                                fdTableActions.tableCache[table.id].lastCell  = null;
                                fdTableActions.tableCache[table.id].cellHover = cellHover;
                        };
                        /*@end
                        @*/
                        rowArr = [];
                        rowList = table.getElementsByTagName('tr');

for(var i = 0;i < rowList.length;i++){
                                colObj = [];
                                elem = rowList[i].firstChild;
                                do {
                                        if(elem.tagName && elem.tagName.toLowerCase().search(/td|th/) != -1) {
                                                colObj[colObj.length] = elem;
                                        };
                                        elem = elem.nextSibling;
                                } while(elem);
                                if(i % 2 == 0 && rowAlt) rowList[i].className = rowList[i].className + " " + rowAlt;
                                rowArr[rowArr.length] = colObj;
                        };

/*@cc_on
                        /*@if (@_win32)
                        if(fdTableActions.tableCache[table.id].req) {
                                if(!cellHover && !rowSelect && !colHover && !rowHover) continue;
                        } else {
                                if(!colHover && !rowSelect) continue;
                        };
                        @else @*/
                        if(!colHover && !rowSelect) continue;
                        /*@end
                        @*/

if(rowArr.length > 0){
                                /* Attribution: Parts of the following code based on an original script by Richard Cornford (http://www.litotes.demon.co.uk/example_scripts/tableHighlighter.html) */
                                if(colHover) {
                                        rowLength = rowArr[0].length;
                                        for(var c = 0;c < rowArr[0].length;c++){
                                                if(rowArr[0][c].getAttribute(colspan) > 1){
                                                        rowLength = rowLength + (rowArr[0][c].getAttribute(colspan) - 1);
                                                };
                                        };

workArr  = new Array(rowArr.length);
                                        for(var c = rowArr.length;c--;){
                                                workArr[c]  = new Array(rowLength);
                                        };

colHead = new Array(rowLength);
                                        for(var c = rowLength;c--;){
                                                colHead[c]  = [];
                                        };

for(var c = 0;c < workArr.length;c++) {
                                                celCount = 0;
                                                for(var i = 0;i < rowLength;i++) {
                                                        if(!workArr[c][i]) {
                                                                cel = rowArr[c][celCount];
                                                                colSpan = (cel.getAttribute(colspan) && cel.getAttribute(colspan) > 1) ? cel.getAttribute(colspan) : 1;
                                                                rowSpan = (cel.getAttribute(rowspan) && cel.getAttribute(rowspan) > 1) ? cel.getAttribute(rowspan) : 1;
                                                                cel.className = cel.className + " fdCellProcessed-" + i + "-" + (i + Number(colSpan));
                                                                for(var t = 0;((t < colSpan)&&((i+t) < rowLength));t++){
                                                                        for(var n = 0;((n < rowSpan)&&((c+n) < workArr.length));n++){
                                                                                workArr[(c+n)][(i+t)] = cel;
                                                                        };
                                                                        colHead[(i+t)][colHead[(i+t)].length] = cel;
                                                                };
                                                                if(++celCount == rowArr[c].length) break;
                                                        };
                                                };
                                        };
                                        /* End attribution */
                                        fdTableActions.tableCache[table.id].colCache = colHead;
                                };
                                /*@cc_on
                                /*@if (@_win32)
                                fdTableActions.addEvent(table, "mouseleave",  fdTableActions.tableEvent);
                                @else @*/
                                fdTableActions.addEvent(table, "mouseout",  fdTableActions.tableEvent);
                                /*@end
                                @*/

fdTableActions.addEvent(table, "mouseover", fdTableActions.tableEvent);

if(rowSelect) {
                                        fdTableActions.addEvent(table, "click",  fdTableActions.clickEvent);
                                };
                        };
                };
        },
        clickEvent:function(e) {
                e = e || window.event;
                var tr, cell;
                if(e.target) tr = e.target;
                else if (e.srcElement) tr = e.srcElement;

while(true) {
                        if(tr && !cell && tr.nodeName && tr.nodeName.search(/^(TD|TH)$/) != -1) { cell = tr; }
                        else if(tr && tr.nodeName && tr.nodeName.search(/^(TR)$/) != -1) { break; };
                        try { tr = tr.parentNode; } catch(err) { break; };
                };

if(!tr || !tr.nodeName || tr.nodeName.search(/^(TR)$/) == -1) { return; };

var remove = (tr.className.search(fdTableActions.tableCache[this.id].rowSelect) != -1);
                var action = true;

if(fdTableActions.tableCache[this.id].rowSelectCallback) {
                        var func;
                        if(fdTableActions.tableCache[this.id].rowSelectCallback.search(".") != -1) {
                                var split = fdTableActions.tableCache[this.id].rowSelectCallback.split(".");
                                func = window;
                                for(var i = 0, f; f = split[i]; i++) {
                                        if(f in func) {
                                                func = func[f];
                                        } else { break; };
                                };
                        } else if(fdTableActions.tableCache[this.id].rowSelectCallback in window) {
                                func = window[fdTableActions.tableCache[this.id].rowSelectCallback];
                        } else if("rowSelectCallback" in window) {
                                func = window["rowSelectCallback"];
                        };
                        if(typeof func == "function") {
                                action = func({"table":this, "cell":cell, "row":tr, "remove":remove, "rows":fdTableActions.tableCache[this.id].trCache.concat([])});
                        };
                        func = null;
                };

if(action) {
                        if(remove) {
                                tr.className = tr.className.replace(fdTableActions.tableCache[this.id].rowSelect, "");
                                var rowArr = [];
                                for(var i = 0, elem; elem = fdTableActions.tableCache[this.id].trCache[i]; i++) {
                                        if(elem != tr) rowArr[rowArr.length] = elem;
                                };
                                fdTableActions.tableCache[this.id].trCache = rowArr;
                        } else {
                                tr.className = tr.className + " " + fdTableActions.tableCache[this.id].rowSelect;
                                if(fdTableActions.tableCache[this.id].rowSelectSingle && fdTableActions.tableCache[this.id].trCache.length) {
                                        fdTableActions.tableCache[this.id].trCache[0].className = fdTableActions.tableCache[this.id].trCache[0].className.replace(fdTableActions.tableCache[this.id].rowSelect, "");
                                        fdTableActions.tableCache[this.id].trCache = [];
                                };
                                fdTableActions.tableCache[this.id].trCache[fdTableActions.tableCache[this.id].trCache.length] = tr;
                        };
                };
        },
        tableEvent:function(e) {
                e = e || window.event;
                var p;
                if(e.type == "mouseout") {
                        p = e.toElement || e.relatedTarget;
                } else {
                        p = e.target || e.srcElement;
                        if (p.nodeType && p.nodeType == 3) p = p.parentNode;
                };

while(true) {
                        if(p && p.nodeName && p.nodeName.search(/^(TD|TH)$/) != -1) { break; };
                        try { p = p.parentNode; } catch(err) { break; };
                };

// Get the old column range
                var colRangeOld = fdTableActions.tableCache[this.id].lastColCache;
                var r = [];
                var n = [];

if(e.type == "mouseover" && p && p.nodeName.search(/^(TD|TH)$/) != -1) {
                        // Do current cell & row for bloody IE
                        /*@cc_on
                        /*@if(@_win32)
                        if(fdTableActions.tableCache[this.id].req) {
                                if(fdTableActions.tableCache[this.id].rowHover) {
                                        var tr = p.parentNode;
                                        if(fdTableActions.tableCache[this.id].lastRow != tr) {
                                                if(fdTableActions.tableCache[this.id].lastRow) {
                                                        fdTableActions.tableCache[this.id].lastRow.className = fdTableActions.tableCache[this.id].lastRow.className.replace(new RegExp(fdTableActions.tableCache[this.id].rowHover, "g"),"");
                                                        fdTableActions.tableCache[this.id].lastRow = false;
                                                };
                                                tr.className = tr.className+ " " + fdTableActions.tableCache[this.id].rowHover;
                                                fdTableActions.tableCache[this.id].lastRow = tr;
                                        };
                                };
                                if(fdTableActions.tableCache[this.id].cellHover) {
                                        if(fdTableActions.tableCache[this.id].lastCell != p) {
                                                if(fdTableActions.tableCache[this.id].lastCell) {
                                                        fdTableActions.tableCache[this.id].lastCell.className = fdTableActions.tableCache[this.id].lastCell.className.replace(new RegExp(fdTableActions.tableCache[this.id].cellHover, "g"),"");
                                                        fdTableActions.tableCache[this.id].lastCell = false;
                                                };
                                                p.className = p.className + " " + fdTableActions.tableCache[this.id].cellHover;
                                                fdTableActions.tableCache[this.id].lastCell = p;
                                        };
                                };
                        };
                        /*@end
                        @*/
                        if(!fdTableActions.tableCache[this.id].colHover || p.className.search("fdCellProcessed-") == -1) return;
                        var m = p.className.match(/fdCellProcessed-([\d]+)-([\d]+)/);
                        m[1] = Number(m[1]);
                        m[2] = Number(m[2]);
                        if(fdTableActions.tableCache[this.id].lastColCache[0] == m[1] && fdTableActions.tableCache[this.id].lastColCache[1] == m[2]) return;
                        for(var i = colRangeOld[0]; i < colRangeOld[1]; i++) {
                                if(i < m[1] || i >= m[2]) {
                                        r[r.length] = i;
                                };
                        };
                        fdTableActions.tableCache[this.id].lastColCache = [m[1], m[2]];
                        n = [m[1], m[2]];
                } else {
                        /*@cc_on
                        /*@if(@_win32)
                        if(fdTableActions.tableCache[this.id].req) {
                                if(fdTableActions.tableCache[this.id].lastRow) {
                                        fdTableActions.tableCache[this.id].lastRow.className = fdTableActions.tableCache[this.id].lastRow.className.replace(fdTableActions.tableCache[this.id].rowHover,"");
                                        fdTableActions.tableCache[this.id].lastRow = null;
                                };
                                if(fdTableActions.tableCache[this.id].lastCell) {
                                        fdTableActions.tableCache[this.id].lastCell.className = fdTableActions.tableCache[this.id].lastCell.className.replace(fdTableActions.tableCache[this.id].cellHover,"");
                                        fdTableActions.tableCache[this.id].lastCell = null;
                                };
                        };
                        /*@end
                        @*/
                        if(!fdTableActions.tableCache[this.id].colHover) { return; };
                        for(var i = colRangeOld[0]; i <= colRangeOld[1]; i++) {
                                r[r.length] = i;
                        };
                        fdTableActions.tableCache[this.id].lastColCache = [0,0];
                };

// Remove
                if(r.length) {
                        for(var i = 0; i < r.length; i++) {
                                if(r[i] >= fdTableActions.tableCache[this.id].colCache.length) continue;
                                elemArr = fdTableActions.tableCache[this.id].colCache[r[i]];
                                for(var ec = 0, elem; elem = elemArr[ec]; ec++) {
                                        elem.className = elem.className.replace(fdTableActions.tableCache[this.id].colHover, "");
                                };
                        };
                };

// Add
                if(n.length) {
                        for(i = n[0]; i < n[1]; i++) {
                                elemArr = fdTableActions.tableCache[this.id].colCache[i];
                                for(var ec = 0, elem; elem = elemArr[ec]; ec++) {
                                        if(elem.className.search(fdTableActions.tableCache[this.id].colHover) == -1) {
                                                elem.className = elem.className + " " + fdTableActions.tableCache[this.id].colHover;
                                        };
                                };
                        };
                };
        },
        deselectAllRows:function(tableId) {
                if(!(tableId in fdTableActions.tableCache) || !fdTableActions.tableCache[tableId].rowSelect) return;
                var trList = fdTableActions.tableCache[tableId].trCache;
                for(var i = trList.length; i--;) {
                        trList[i].className = trList[i].className.replace(fdTableActions.tableCache[tableId].rowSelect, "");
                };
                fdTableActions.tableCache[tableId].trCache = [];
                trList = null;
        },
        unLoad:function() {
                var table;
                for(tbl in fdTableActions.tableCache) {
                        table = document.getElementById(tbl);
                        if(table) {
                                fdTableActions.removeEvent(table, "mouseover", fdTableActions.tableEvent);
                                fdTableActions.removeEvent(table, "mouseout",  fdTableActions.tableEvent);
                                if(fdTableActions.tableCache[tbl].rowSelect) {
                                        fdTableActions.removeEvent(table, "click",  fdTableActions.clickEvent);
                                };
                        };
                        /*@cc_on
                        /*@if(@_win32)
                        fdTableActions.tableCache[tbl].req = fdTableActions.tableCache[tbl].lastRow = fdTableActions.tableCache[tbl].lastCell = null;
                        /*@end
                        @*/
                        fdTableActions.tableCache[tbl].colCache = fdTableActions.tableCache[tbl].trCache = null;
                        fdTableActions.tableCache[tbl] = null;
                        delete(fdTableActions.tableCache[tbl]);
                };
        },
        addEvent:function(obj, type, fn) {
                if( obj.attachEvent ) {
                        obj["e"+type+fn] = fn;
                        obj[type+fn] = function(){obj["e"+type+fn]( window.event );};
                        obj.attachEvent( "on"+type, obj[type+fn] );
                } else {
                        obj.addEventListener( type, fn, true );
                };
        },
        removeEvent: function(obj, type, fn) {
                if( obj.detachEvent ) {
                        try {
                                obj.detachEvent( "on"+type, obj[type+fn] );
                                obj[type+fn] = obj["e"+type+fn] = null;
                        } catch(err) {};
                } else {
                        obj.removeEventListener( type, fn, true );
                };
        }
};

fdTableActions.addEvent(window, "load", fdTableActions.init);
fdTableActions.addEvent(window, "unload", fdTableActions.unLoad);

URL: http://www.frequency-decoder.com/2007/11/15/unobtrusive-table-actions-script

Report this snippet Tweet