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

浏览数：34 / 时间：2015年06月09日

前段时间，项目中遇到这样一个需求。需要在页面中像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;
}

</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>

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>

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

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