javascript: Implementing selection via click, control click and shift click, such as in windows explorer
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!
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.
精彩评论