Scrollable Table select row

[buntyindia]

I have the following scrollable table I have to implemet a functionality that I can select a row in it & display that data in popup window..

Any hints/example or similar available implementation?

http://www.imaputz.com/cssStuff/bigFourVersion.html#

Help

[acoder]

You could pass a reference of the table row to the function which handles the onclick event and use cells[] to retrieve the td values.

[buntyindia]

HI Mod, Thanks for reply but can you please provide a little example how can i do this ...how can I select a row and gets it value......

[acoder]

Pass the id of the table row (assuming you have given ids to each row to the function:

onclick="doSomething('tr_id');"

then use the table row's cells array to get the data from the table data cells. If you don't want to do this inline, see the advanced event handling in this article.

[buntyindia]

Hi,

I have made a script that select Row of a HTML table ...
but problem is it is only working with th IE.... what I have to do to make it compatible with the Mozila Firefox..


Please help....

function mouse_event_handler(e) {
    e = e ||  window.event;
    var cell = e.srcElement || e.target;
    var tname = (cell.nodeType == 1) ? cell.tagName.toLowerCase() : '';
    while(tname != "table" && tname !="td" && tname != "th"){
            cell= cell.parentNode || cell.parentElement;
            tname = cell.tagName.toLowerCase();
    }
    if (tname == "td" || tname == "th") {
        var newClass;
        var cellIdx = _getCellIndex(cell);
        var row = cell.parentNode || cell.parentElement;
        var rowIdx = _getRowIndex(row);
        if (cellIdx == 0 && rowIdx == 0) {
            clearHighlight();
        }
        else if (cellIdx == 0) {
            _setRow();
        }
        else {
            _setRow();
 
        }
    }
    function _getTable() {
        var tbleObj;
        if (mouse_event_handler.previous.table)
            return;
        else {
            tbleObj = row.parentNode || row.parentElement; //tbody
            var tn = tbleObj.tagName.toLowerCase();
            while (tn != "table" && tn != "html") {
                tbleObj = tbleObj.parentNode || tbleObj.parentElement;
                tn = tbleObj.tagName.toLowerCase();
            }
            mouse_event_handler.previous.table = tbleObj;
        }
    }//eof _getTable
    function _clearHighlight() {
        _clearRow();
        mouse_event_handler.previous.row = null;
        mouse_event_handler.previous.cellIdx = null;
    }//eof clearHighlight
    function _clearRow() {
        if (mouse_event_handler.previous.row) {
            mouse_event_handler.previous.row.className = "";
            mouse_event_handler.previous.row.cells[0].className = "";
        }
    }//eof clearRow
    function _setRow() {
        _clearRow();
        if (tname == 'td' || mouse_event_handler.previous.row != row) {
            row.className = 'hlt';
            row.cells[0].className = 'hlt';
            mouse_event_handler.previous.row = row;
 
        }
        else {
            mouse_event_handler.previous.row = null;
        }
    }//eof setRow
    function _getCellIndex(cell) {
        var rtrn = cell.cellIndex || 0;
 
        if (rtrn == 0) {
            do{
                if (cell.nodeType == 1) rtrn++;
                cell = cell.previousSibling;
            } while (cell);
            --rtrn;
        }
        return rtrn;
    }//eof getCellIndex
    function _getRowIndex(row) {
        var rtrn = row.rowIndex || 0;
 
        if (rtrn == 0) {
            do{
                if (row.nodeType == 1) rtrn++;
                row = row.previousSibling;
            } while (row);
            --rtrn;
        }
        return rtrn;
    }//eof getRowIndex
}//eof mouse_event
mouse_event_handler.previous = {cellIdx: null, row: null, table: null};
function addEvent(obj, event_name, fnc) {
 
    if (typeof obj == "undefined")
        return;
    else if (obj.attachEvent)
        obj.attachEvent("on"+event_name, fnc);
    else if (obj.addEventListener && !browser.isKHTML)
        obj.addEventListener(event_name, fnc, false);
    else
        obj["on" + event_name] = fnc;
 
}//eof addEvent
 

Regards,
BuntyIndia

[acoder]

So what happens? Do you get any errors?

[buntyindia]

So what happens? Do you get any errors?

In Mozilla now it is working fine but in IE some time it give error in line 88

mouse_event_han dler.previous.r ow.cells.0 is null or not a object

Pleaes suggest what i do?

[acoder]

Does this occur in _clearRow()?