在html页，使用ctrl，shift多选表格行

前段时间，项目中遇到这样一个需求。需要在页面中像windows资源管理器中一样可以使用ctrl和shift键来多选。

<html>
<head>
<style>
body{
-moz-user-select:none;/*火狐*/
-webkit-user-select:none;/*webkit浏览器*/
-ms-user-select:none;/*IE10*/
-khtml-user-select:none;/*早期浏览器*/
user-select:none;
}
<!-- IE9无法通过css实现，既不支持-ms-user-select: none;也不支持user-select: none;
目前只找到一种方法，给不可选元素加上属性：unselectable="on"。（这个我试了一下，IE9下好像也不起作用） -->
</style>
</head>
<body>
<table id="tb1" style="border:1px solid red">
<tr>
<td>1111111111111111111111111111111111111111111111111111111111111</td>
</tr>
<tr>
<td>1111111111111111111111111111111111111111111111111111111111111</td>
</tr>
<tr>
<td>1111111111111111111111111111111111111111111111111111111111111</td>
</tr>
<tr>
<td>1111111111111111111111111111111111111111111111111111111111111</td>
</tr>
<tr>
<td>1111111111111111111111111111111111111111111111111111111111111</td>
</tr>
<tr>
<td>1111111111111111111111111111111111111111111111111111111111111</td>
</tr>
<tr>
<td>1111111111111111111111111111111111111111111111111111111111111</td>
</tr>
<tr>
<td>1111111111111111111111111111111111111111111111111111111111111</td>
</tr>
<tr>
<td>1111111111111111111111111111111111111111111111111111111111111</td>
</tr>
<tr>
<td>1111111111111111111111111111111111111111111111111111111111111</td>
</tr>
<tr>
<td>1111111111111111111111111111111111111111111111111111111111111</td>
</tr>
<tr>
<td>1111111111111111111111111111111111111111111111111111111111111</td>
</tr>
<tr>
<td>1111111111111111111111111111111111111111111111111111111111111</td>
</tr>
<tr>
<td>1111111111111111111111111111111111111111111111111111111111111</td>
</tr>
<tr>
<td>1111111111111111111111111111111111111111111111111111111111111</td>
</tr>
</table>

 

 

 

<script>

window.onload=function(){

var keyCode;
var rowsIndex = [];
var startIndex;
var isCtrl = false;
document.onkeydown = function (e) {
　　if (!keyCode) {
　　　　if (window.event) {
　　　　　　keyCode = event.keyCode;
　　　　} else if (e.which) {
　　　　　　keyCode = e.which;
　　　　}
　　}
}

document.onkeyup = function () {
　　if (keyCode) {
　　　　keyCode = undefined;
　　}
};

 

 


var tb=document.getElementById("tb1");
var trs=tb.getElementsByTagName("tr");

for(var i=0;i<trs.length;i++){
trs[i].onclick=function(){
var currentIndex;
for(var j=0;j<trs.length;j++){
if(this==trs[j]){
currentIndex=j;
}
}
switch (keyCode) {
case 17://ctrl
isCtrl = true;
var flag = true;


for (var k = 0; k < rowsIndex.length; k++) {
if (rowsIndex[k].rowIndex == currentIndex) {
rowsIndex.splice(k, 1);
flag = false;
break;
}
}

if (flag) {
rowsIndex.push({'rowIndex': currentIndex });
}
startIndex = currentIndex;
break;
case 16://shift
if (!isCtrl) {
for(var k = 0;k < trs.length;k++){
if(trs[k].style.backgroundColor=='red'){
startIndex=k;
}
}
}

var start, end;
if (startIndex < currentIndex) {
start = startIndex;
end = currentIndex;
} else {
start = currentIndex;
end = startIndex;
}
rowsIndex = [];
for(var k=0;k < trs.length;k++){
if(trs[k].style.backgroundColor=='red'){
trs[k].style.backgroundColor='white';
}
}
for (var k = start; k <= end ; k++) {
rowsIndex.push({ 'rowIndex': k });
}

isCtrl = false;
break;
default:
rowsIndex = [];
for(var k=0;k < trs.length;k++){
if(trs[k].style.backgroundColor=='red'){
trs[k].style.backgroundColor='white';
}
if(k==currentIndex){
trs[k].style.backgroundColor='red';
}
}
isCtrl = false;
break;
}

for (var k = 0; k < rowsIndex.length; k++) {
trs[rowsIndex[k].rowIndex].style.backgroundColor='red';
}
};

}

 

};

 

 

</script>
</body>
</html>

 

posted @ 2015-03-23 11:32  公羊天纵  阅读(2844)  评论(0)  编辑  收藏  举报