前段时间，项目中遇到这样一个需求。需要在页面中像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. BrnShop开源网上商城第四讲：自定义插件

    重要通知:BrnShop企业版NOSQL设计(基于Redis)已经开源!源码内置于最新版的BrnShop中,感兴趣的园友可以去下载来看看.官网地址:www.brnshop.com. 好了现在进入今天的 ...

  2. C# 深复制

    using System; using System.Collections.Generic; using System.Linq; using System.Text; namespace Cons ...

  3. 从修复 testerhome(rubychina)网站的一个 bug 学习 ruby&rails on ruby

    前言 testerhome: http://testerhome.com/topics/1480 对于一个差点脱离前沿技术人,想要学习ruby,就意味着要放弃熟悉的操作系统windows,熟悉的ide ...

  4. Datatable转换成List实体对象列表 几个实例

    一, /// <summary> /// 将Datatable转换为List集合 /// </summary> /// <typeparam name="T&q ...

  5. Html笔记(二)字体

    字体标签:<font> 例:<font size=5 color=red>字体标签示例</font> 注:简单颜色可以直接写对应的英文,复杂的颜色用16进制表示,表 ...

  6. wuzhicms 发送邮件

    发送邮件 //邮件发送 $config = get_cache('sendmail'); $siteconfigs = get_cache('siteconfigs'); $password = de ...

  7. vijosP1447 开关灯泡

    vijosP1447 开关灯泡 链接:https://vijos.org/p/1447 [思路] 数学+高精度. 分析题目:题中有言,i时刻将其所有倍数的灯熄灭,由此得知一个数有多少个倍数就会被操作多 ...

  8. Extjs中grid行的上移和下移

    一.将up和down按钮放到tbar中,然后选中grid行即可实现上移和下移 var up = new Ext.Action({ text : 'Up', icon : 'up.png',//或者添加 ...

  9. 【转载】linux 技巧：使用 screen 管理你的远程会话

    转自:https://www.ibm.com/developerworks/cn/linux/l-cn-screen/ 总结 启动并进入一个screen会话:screen 或者 screen -S 名 ...

  10. Hadoop新手学习线路指导

    对于我们新手入门学习hadoop大数据存储的朋友来说,首先了解一下云计算和云计算技术是有必要的.下面先是介绍云计算和云计算技术的:              云计算,是一种基于互联网的计算方式,通过这 ...