前段时间，项目中遇到这样一个需求。需要在页面中像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. [c#美味] Guid ToString 格式知多少？

    在日常编程中,Guid是比较常用的,最常见的使用就是如下所示: string id = Guid.NewGuid().ToString(); 这条语句会生成一个新的Guid并转成字符串,如下: // ...

  2. C#使用SQLite出错：无法加载 DLL“SQLite.Interop.dll”，找不到指定的模块

    在SQLite官方下载了System.Data.SQLite,编写如下测试代码: 复制内容到剪贴板 程序代码 using (SQLiteConnection conn = new SQLiteConn ...

  3. Linux使用sudo提权时，出现xx 不在 sudoers 文件中。此事将被报告。visudo 命令简单介绍。

    在使用 sudo 临时提权时,出现:不在 sudoers 文件中.此事将被报告. 可以使用 visudo命令 来配置/etc/sudoers文件,将目标用户赋予使用sudo命令的能力. visudo命 ...

  4. [洛谷2397]yyy loves Maths VI

    题目背景 自动上次redbag用加法好好的刁难过了yyy同学以后,yyy十分愤怒.他还击给了redbag一题,但是这题他惊讶的发现自己居然也不会,所以只好找你 题目描述 他让redbag找众数他还特意 ...

  5. Specular light 计算

    Specular lighting is most commonly used to give light reflection off of metallic surfaces such as mi ...

  6. Storm系列(一)集群的安装配置

    安装前说明: 必须先安装zookeeper集群 该Storm集群由三台机器构成,主机名分别为chenx01,chenx02,chenx03,对应的IP分别为192.168.1.110,192.168. ...

  7. iOS 第三方库冲突的处理

    最近项目组在做一些第三方功能的集成,不止一次的遇到第三方库冲突的问题,报错如下: duplicate symbol _OBJC_METACLASS_$_JKSerializer in: /Users/ ...

  8. Step-by-Step Guide to Portal Development for Microsoft Dynamics CRM - 摘自网络

    The Challenge Oftentimes in the world of Dynamics CRM, the need arises for non-CRM users to gain acc ...

  9. tomcat运行问题解决方法

    早上过来遇到一个非常奇怪的问题,运行一个新的项目,运行环境都没问题,可是在调试的时候,总是出错. 错误代码: log4j:WARN No appenders could be found for lo ...

  10. hdoj 1237 简单计算器

    简单计算器 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Submi ...