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

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

1 Answer 1

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.