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

在html页，使用ctrl，shift多选表格行的更多相关文章

  1. MFC CListCtrl得到ctrl,shift多选的行号

    vector<int> selVect; int count = m_consumeList.GetItemCount(); //你的列表多少行 for (int i = 0; i< ...

  2. 【editplus经常用的快捷键】Editplus 选中一行ctrl+r，Edit 合并行 Ctrl+Shift+J 合并选定行 删除当前行

    Editplus 选中一行: ctrl+rEditplus 复制一行: ctrl+r选择行,然后ctrl+c复制.复制一行到下一行中:Editplus有:Ctrl+j 复制上一行的一个字符到当前行Ed ...

  3. uniDBGrid实行多选表格行

    http://blog.csdn.net/shuiying/article/details/11374655 uniDBGrid本身是支持checkBox多选的,但必须是Boolean的字段才行,只要 ...

  4. Ctrl+Shift+F12切换最大化编辑器

    常用快捷键(keymaps:Default情况下) Esc键编辑器(从工具窗口) F1帮助千万别按,很卡! F2(Shift+F2)下/上高亮错误或警告快速定位 F3向下查找关键字出现位置 F4查找变 ...

  5. Element中Tree树结构组件中实现Ctrl和Shift多选

    在Element中的树结构中, 实现多选功能,首先的是判断有没有按下键盘ctrl和shift按键.但是在Element中的tree组件的左键点击事件是没有提供$event鼠标属性判断的.所以就需要在函 ...

  6. JavaFX2: 鼠标拖动选择和Ctrl+Shift连续区间选择的ListView

    JavaFX2的ListView中的多选没有提供鼠标拖动选择的功能,同时按下Ctrl和Shift后连续的区间选中也不支持,以下代码用于处理这两个问题,细节见代码注释: import com.sun.j ...

  7. phpstorm ctrl+shift+F键不管用，不弹出搜索弹框

    般热键冲突搜狗默认简繁切换组合键位ctrl+shift+F故outlook2011按三建且失效应该能看搜狗输入状态简繁变搜狗设置按键-取消选简繁切换热键即在任务栏的语言地方点击一下再点击语言首选项.进 ...

  8. myeclipse中格式化代码快捷键Ctrl+Shift+F失效的解决办法

    任何软件快捷键失效99%的原因是跟其他软件的快捷键冲突了,经过检查,是跟搜狗输入法的简繁体切换快捷键Ctrl+Shift+F 冲突了,打开搜狗工具箱中的属性设置: 在属性设置中找到“按键”,将简繁体快 ...

  9. IntelliJ IDEA 2017版 快捷键CTRL + SHIFT + A无效如何调试(详细的开启idea自动make功能 )

    1.前景描述 因为我把编译器的快捷键都设置成eclipse模式了,所以要做热部署的时候,需要CTRL + SHIFT + A --> 查找Registry --> 找到并勾选compile ...

随机推荐

  1. MongoDB之三（高级操作 聚合、游标）

    一: 聚合 常见的聚合操作跟sql server一样,有:count,distinct,group,mapReduce. <1> count count是最简单,最容易,也是最常用的聚合工 ...

  2. [Buffalo]MVC架构模式

    MVC架构模式:即Model(模型)-View(视图)-Controller(控制器). 很多人将MVC和所谓的“三层架构”进行比较,其实两者并没有什么可比性,MVC更不是分别对应着UI.业务逻辑和数 ...

  3. Android SDK 离线安装方法

    有朋友反映从连接直接下载安装包不能获取到最新版本(每次更新后的包地址需要重新去查找),而且经常无法访问. 最方便的方法是使用代理或vpn接入网络,即可及时下载最新版sdk. 作为一名开发人员,流畅地浏 ...

  4. （5）I2C总线的10bit地址以及通用广播地址

    其实,10bit地址我没用过,通用广播地址更没用过.通用广播地址应该是在多个mcu之间用i2c进行通信时使用的.虽说没用到,但还是做了翻译,说不定以后有机会用到: 10bit地址 10bit的寻址扩展 ...

  5. 从打车软件你能想到多少？盈利模式？商机？大数据？移动互联网蛋糕？生活方式改变withApp？

    物联网.云服务.大数据.. 淘宝.12306.卡通...一个产品改变一次生活方式. 打车app,无疑是改变生活方式的又一个产品.从打车软件,你能看到什么? 个人认为,打车软件值得各种投资方斥资,最重要 ...

  6. JAVA面试题——JAVA编程题1（2015.07.22——湛耀）

    实现代码很简单:   package com.xiaozan.shopping;   import java.util.Arrays;   public class ShoppingCart {    ...

  7. 如何进行Hadoop二次开发指导视频下载

    本视频适合对Java有一定了解,熟悉java se的Hadoop爱好者,想对Hadoop进行二次开发.下面是以伪分布为例: 想对Hadoop二次开发:一.首先需要Hadoop和Java之间搭建Ecli ...

  8. HDOJ-ACM1425 sort 简单hash应用

    其实快排也可以通过这个问题~不是考点 没想到考点是这个,简单hash应用,空间换时间 初始化一个长度为1000001的数组(由于数字的范围为[-500000,500000]) 如果存在这个数m,数组下 ...

  9. poj 1459 Power Network【建立超级源点，超级汇点】

    Power Network Time Limit: 2000MS   Memory Limit: 32768K Total Submissions: 25514   Accepted: 13287 D ...

  10. Redis常用数据类型

    Redis常用数据类型 转载自:http://blog.sina.com.cn/s/blog_7f37ddde0101021q.html     Redis最为常用的数据类型主要有以下五种: ●Str ...