In Javascript:

I need to implement selection via click, control click and shift click on rows in an html table, such as in windows explorer, and I hate to write it if the code already exists.

Can anyone point me in the right direction?

thanks!

In Javascript:

I need to implement selection via click, control click and shift click on rows in an html table, such as in windows explorer, and I hate to write it if the code already exists.

Can anyone point me in the right direction?

thanks!

• javascript

Share Improve this question Follow asked Feb 28, 2010 at 20:59 sdforsdfor 6,4781616 gold badges5353 silver badges6262 bronze badges 1

• 1 Selection of what? Can you be more specific in your requirements? – ntownsend Commented Feb 28, 2010 at 22:01

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

The required script is very simple. Something like this will work:

var keyDown = null;
var selectedRows;
var allRows;

function bindEvents() {
    allRows = document.getElementsByTagName("tr");
    document.onkeydown = function(e) {
        if (!e) e = window.event;
        if (e.ctrlKey) keyDown = "ctrl";
        if (e.shiftKey) keyDown = "shift";
    };

    document.onkeyup = function(e) {
        keyDown = null;
    };

    for (var i = 0, l = allRows.length; i < l; i++) {
        allRows[i].onclick = new Function("selectRow(" + i + ")");
    }
}

function selectRow(rowID) {
    if (!keyDown)
        selectedRows = [rowID];
    else {
        if (keyDown == "ctrl")
            selectedRows.push(rowID);
        else {
            if (selectedRows.length > 0) {
                var lastSelected = selectedRows[selectedRows.length - 1];
                for (var i = lastSelected + 1; i <= rowID; i++)
                    selectedRows.push(i);
            } else
                selectedRows.push(rowID);
        }
    }

    for (var i = 0, l = allRows.length; i < l; i++)
        allRows[i].style.backgroundColor = "";

    if (selectedRows.length > 0)
        for (var i = 0, l = selectedRows.length; i < l; i++)
            allRows[selectedRows[i]].style.backgroundColor = "red";

    keyDown = null;
}

Add body onload="bindEvents()" and it will work on all tables you have in the page (if you have more than one, you might have to change the script to only use the one you care about). It's not the most beautiful code, but it will do the trick.