关闭

table行的选择(含ctrl,shift)

545人阅读 评论(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.onkeydown=function   (){
if(event.keyCode==17){
ctrl=true;
}else   if(event.keyCode==16){
shift=true;
}
};
document.onkeyup=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"   onclick="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 > 

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:26311次
    • 积分:435
    • 等级:
    • 排名:千里之外
    • 原创:16篇
    • 转载:0篇
    • 译文:0篇
    • 评论:3条
    文章分类
    最新评论