在html頁，使用ctrl，shift多選表格行

本文轉載自查看原文 2015-03-23 11:32 1998 頁面ctrl和shift多選/ 前端

前段時間，項目中遇到這樣一個需求。需要在頁面中像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>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 WPF TreeView Ctrl/Shift多選【editplus經常用的快捷鍵】Editplus 選中一行ctrl+r，Edit 合並行 Ctrl+Shift+J 合並選定行刪除當前行 html中刪除表格的一行(有彈窗) VS2019或者VSCode中“Ctrl+Shift+F”快捷鍵無法使用 idea 全局搜索（Ctrl+Shift+F）不能使用解決辦法 vs2019的ctrl+shift+f Sublime Text shift+ctrl妙用 IDEA 2021.2 Ctrl + Shift + F 失效 Sublime Text shift+ctrl 妙用 Eclipse Ctrl + Shift + O in IntelliJ IDEA