前段时间，项目中遇到这样一个需求。需要在页面中像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. 基于WebForm+EasyUI的业务管理系统形成之旅 -- 登录窗口(Ⅱ)

    上篇<基于WebForm+EasyUI的业务管理系统形成之旅 -- 系统设置>,主要是介绍系统浏览器在线下载安装,这些前期准备是非常重要的. 最近忙于将工程管理系统中各个模块,用业务流程方 ...

  2. spilt用法简介

    //获取墓位位置 string MWFLMC = "和平区祥和园D组A碑11排"; //得到字符数组 ]; //分割字符数组 sArray1 = MWFLMC.Split(] { ...

  3. Warning: Function created with compilation errors！

    解决方案: sqlplus / as sysdba grant execute on UTL_I18N to scott; grant execute on DBMS_CRYPTO to scott;

  4. 使用Windows Azure创建Windows系统虚拟机-上

    创建虚拟机来运行Windows 本教程介绍了如何轻松创建运行Windows 的 Azure虚拟机(VM),用作来自Azure管理门户中映像图库的Windows 服务器映像.映像图库提供了多种图像,包括 ...

  5. 浏览器兼容性的css hack 写法

    IE各版本浏览器之间的识别概括如下: IE6:能识别 * .\9 和 _ ,不能识别 !important IE7:能识别 * .\9 和 !important,不能识别 _ IE8:能识别 \9 和 ...

  6. Storm系列(十七)DRPC介绍

    Storm版本0.9.5 在storm中DRPC服务应用于远程分布式计算,根据客户端提交的请求参数,而返回Storm计算的结果. DRPC服务启动流程(远程模式) 启动DRPC服务,启动命令:stor ...

  7. E297: Write error in swap file解决方法

    vi打开配置文件后显示E297: Write error in swap file,检查磁盘发现磁盘满了.使用du –max-depth=1 | sort –n –r 查找大文件所在位置并删除.

  8. A Tour of Go Forever

    If you omit the loop condition it loops forever, so an infinite loop is compactly(简洁地:紧密地:细密地) expre ...

  9. SQL SERVER 导入EXCEL的存储过程

    1.先在查询分析器里执行 exec sp_configure "show advanced options",1 reconfigure exec sp_configure &qu ...

  10. 使用Git push时出现的一些问题处理

    1.第一个问题 Permission denied (publickey). fatal: Could not read from remote repository. Please make sur ...