table行的选择(含ctrl,shift)

最新推荐文章于 2024-02-01 10:28:53 发布

浪尖赏花

最新推荐文章于 2024-02-01 10:28:53 发布

阅读量1.6k

点赞数

分类专栏： javascript 文章标签： table input function border html

本文链接：https://blog.csdn.net/lihui_shine/article/details/1806741

版权

javascript 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

table行的选择(含ctrl,shift),ctrl按下则支持无序多选,shift按下则支持有序多选

<html >

<head >
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" >
<title >new page </title >
<script >
var ctrl=false;
var shift=false;
document.οnkeydοwn=function (){
if(event.keyCode==17){
ctrl=true;
}else if(event.keyCode==16){
shift=true;
}
};
document.οnkeyup=function (){
ctrl=false;
shift=false;
}
function choose(obj){
var rowI=event.srcElement.parentNode.rowIndex;
if(ctrl&&shift) return;
if(!ctrl&&!shift){
for(var i=0;i <table1.rows.length;i++){
table1.rows(i).cells(0).firstChild.checked=false;
table1.rows(i).bgColor="";
}
table1.rows(rowI).cells(0).firstChild.checked=true;
table1.rows(rowI).bgColor="red";
table1.currentRow=rowI;
}
if(ctrl){
table1.rows(rowI).cells(0).firstChild.checked=true;
table1.rows(rowI).bgColor="red";
}
if(shift){
for(var i=0;i <table1.rows.length;i++){
table1.rows(i).cells(0).firstChild.checked=false;
table1.rows(i).bgColor="";
}
if(rowI <table1.currentRow){
for(var i=rowI;i <=table1.currentRow;i++){
table1.rows(parseInt(i)).cells(0).firstChild.checked=true;
table1.rows(parseInt(i)).bgColor="red";
}
}else{
for(var i=table1.currentRow;i <=rowI;i++){
table1.rows(parseInt(i)).cells(0).firstChild.checked=true;
table1.rows(parseInt(i)).bgColor="red";
}
}
}
}
</script >

</head >

<body >
<table cellpadding="0" border="1" cellspacing="0" width="400" id="table1" currentRow="0" οnclick="choose(this)" >
<tr bgcolor="red" >
<td > <input type=checkbox checked >　 </td >
<td >　 </td >
</tr >
<tr >
<td > <input type=checkbox >　 </td >
<td >　 </td >
</tr >
<tr >
<td > <input type=checkbox >　 </td >
<td >　 </td >
</tr >
<tr >
<td > <input type=checkbox >　 </td >
<td >　 </td >
</tr >
<tr >
<td > <input type=checkbox >　 </td >
<td >　 </td >
</tr >
<tr >
<td > <input type=checkbox >　 </td >
<td >　 </td >
</tr >
<tr >
<td > <input type=checkbox >　 </td >
<td >　 </td >
</tr >
<tr >
<td > <input type=checkbox >　 </td >
<td >　 </td >
</tr >
</table >

</body >

</html >