前段时间，项目中遇到这样一个需求。需要在页面中像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. 使用PowerShell脚本部署定时器到MOSS2010

    转:http://www.77site.com/tech/1087042010072906074113_2012050808152911.html 第一章 前言 在此次练习中,您将了解到如何使用Pow ...

  2. HDU-5373 The shortest problem

    The shortest problem http://acm.hdu.edu.cn/showproblem.php?pid=5373 Time Limit: 3000/1500 MS (Java/O ...

  3. 非递归实现先序遍历 java leecode 提交

    写完才知道自己学习都是似是而非啊,大家可以也在leecode上提交代码,纯手写,离开eclipse第一种方式:数据结构书上的,使用栈大概思路.1.不断将根节点的左孩子的左孩子直到为空,在这个过程入栈. ...

  4. 【原创】一个复制本地文件到Hadoop文件系统的实例

    import java.io.IOException; import java.io.InputStream; import java.io.OutputStream; import java.net ...

  5. HW2.21

    import java.util.Scanner; public class Solution { public static void main(String[] args) { Scanner i ...

  6. sql有几种删除表数据的方式

    有几种删除表数据的方式? truncate.delete和drop都可以删除数据. TRUNCATE TABLE删除表中的所有行,而不记录单个行删除操作. TRUNCATE TABLE 与没有 WHE ...

  7. eclipse设置快捷键sysout+Alt+/后出System.out.println！亲測可用！

    曾经一直用myeclipse,没有这方面的顾虑,如今换到了eclipse,非常多要自己设置了,比方非常多快捷键. 最经常使用的,执行到sysout ,eclipse总是不自己主动补全,非常是恼火!!! ...

  8. mongodb的地理位置索引

    mongoDB支持二维空间索引,使用空间索引,mongoDB支持一种特殊查询,如某地图网站上可以查找离你最近的咖啡厅,银行等信息.这个使用mongoDB的空间索引结合特殊的查询方法很容易实现.前提条件 ...

  9. tomcat安全配置之证书密码加密存储

    最近项目组要完成一个新Web Servicer接口的开发,其中有项要求是支持外部客户程序以https方式访问这些SOAP接口.项目组当前基于tomcat6.0.29开发,axis版本为1.4.拿到这个 ...

  10. 启动列表的activity

    每学一个知识点就要重新创建一个项目,感觉那样太繁琐了,特别是android studio开发,没创建一个项目都会重新打开一个窗口 所以我就在那想,何不有一个功能列表,点击每一个列表项的时候就跳转到那个 ...