在html页，使用ctrl，shift多选表格行
2024-03-16 23:12:56
前段时间，项目中遇到这样一个需求。需要在页面中像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>
最新文章
- Leetcode Power of two, three, four
- 如何判断retina,如何判断设备的比例
- 操作haproxy配置文件教师版
- apache2将http自动指向https
- RMAN_Oracle RMAN的常用Command命令
- 2016 Multi-University Training Contest 5 Two
- NEU 1440 The minimum square sum (平方剩余和欧拉准则)
- SpringtMVC运行流程：@RequestMapping 方法中的 Map、HttpServletRequest等参数信息是如何封装和传递的（源码理解）
- 『TensorFlow』线程控制器类&变量作用域
- GlusterFS卷的自我修复功能
- 【转载】 强化学习（七）时序差分离线控制算法Q-Learning
- 1. Two Sum (快速排序;有序数组的查找: 两个指针; 哈希表)
- ubuntu16.04忘了root密码
- ElasticSearch 数据增删改实现
- 【卡西欧Fx-5800p系列教程】Pol（）和Rec（）正反算妙用
- json_encode让URL内容斜杠/不转义
- redis on windows
- mysql 返回多列的方式
- JS怎样捕获浏览器关闭时间弹出自定义对话框
- 一张图一个表——CSS选择器总结