这个功能如何实现,求各位大哥帮忙?

IE测试通过:<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>

解决方案 »

  1.   

    <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).cells(1).firstChild.style.display="none"; 
    table1.rows(i).bgColor=""; 
    } 
    table1.rows(rowI).cells(0).firstChild.checked=true;
    table1.rows(rowI).cells(1).firstChild.style.display="block";
    table1.rows(rowI).bgColor="red"; 
    table1.currentRow=rowI; 
    } 
    if(ctrl){ 
    table1.rows(rowI).cells(0).firstChild.checked=true; 
    table1.rows(rowI).cells(1).firstChild.style.display="block";
    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).cells(1).firstChild.style.display="none"; 
    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)).cells(1).firstChild.style.display="block";
    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)).cells(1).firstChild.style.display="block";
    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 width="10%"><input type=checkbox checked></td>
    <td width="10%"><img style="display:block" src="http://community.csdn.net/ui/scripts/System/_resource/MzTreeView/file.gif"></img>　</td>
    <td width="80%">　 </td> 
    </tr > 
    <tr > 
    <td > <input   type=checkbox >　 </td > 
    <td><img style="display:none" src="http://community.csdn.net/ui/scripts/System/_resource/MzTreeView/file.gif"></img>　 </td>
    <td >　 </td > 
    </tr > 
    <tr > 
    <td > <input   type=checkbox >　 </td > 
    <td><img style="display:none" src="http://community.csdn.net/ui/scripts/System/_resource/MzTreeView/file.gif"></img>　 </td>
    <td >　 </td > 
    </tr > 
    <tr > 
    <td > <input   type=checkbox >　 </td > 
    <td><img style="display:none" src="http://community.csdn.net/ui/scripts/System/_resource/MzTreeView/file.gif"></img>　 </td>
    <td >　 </td > 
    </tr > 
    <tr > 
    <td > <input   type=checkbox >　 </td > 
    <td><img style="display:none" src="http://community.csdn.net/ui/scripts/System/_resource/MzTreeView/file.gif"></img>　 </td>
    <td >　 </td > 
    </tr > 
    <tr > 
    <td > <input   type=checkbox >　 </td > 
    <td><img style="display:none" src="http://community.csdn.net/ui/scripts/System/_resource/MzTreeView/file.gif"></img>　 </td>
    <td >　 </td > 
    </tr > 
    <tr > 
    <td > <input   type=checkbox >　 </td > 
    <td><img style="display:none" src="http://community.csdn.net/ui/scripts/System/_resource/MzTreeView/file.gif"></img>　 </td>
    <td >　 </td > 
    </tr > 
    <tr > 
    <td > <input   type=checkbox >　 </td > 
    <td><img style="display:none" src="http://community.csdn.net/ui/scripts/System/_resource/MzTreeView/file.gif"></img>　 </td>
    <td >　 </td > 
    </tr > 
    </table > 
    </body > </html >
      

  2.   

    完善了一下：<script  > 
    var   ctrl=false; 
    var   shift=false; 
    var beginRow=0;
    document.onkeydown=function   (){ 
    if(event.keyCode==17){ 
    ctrl=true; 
    }else   if(event.keyCode==16){ 
    shift=true; 
    } 
    }; 
    document.onkeyup=function   (){ 
    ctrl=false; 
    shift=false; 
    } document.onclick=init;
    function init(){
    o=event.srcElement
    //window.event.cancelBubble = true;
    if (o.tagName=="TD"){
    currentRow=o.parentNode.rowIndex
    o=o.parentNode
    flag=0;
    if(shift==false){beginRow=currentRow;}
    changRow(o,currentRow,flag)
    }
    if(o.tagName=="INPUT"){
    if(o.checked){
    currentRow=o.parentNode.parentNode.rowIndex
    o=o.parentNode.parentNode
    flag=0;
    if(shift==false){beginRow=currentRow;}
    changRow(o,currentRow,flag)
    }
    else{
    currentRow=o.parentNode.parentNode.rowIndex
    flag=1;
    o=o.parentNode.parentNode
    changRow(o,currentRow,flag)
    }
    }
    }function changRow(obj,row,flag){
    if(flag==0){
    table1.rows[row].cells[0].firstChild.checked=true;
    table1.rows[row].cells[1].firstChild.style.display="";
    obj.bgColor="red"; 
    changColour(row)
    }
    else{
    table1.rows[currentRow].cells[0].firstChild.checked=false;
    table1.rows[currentRow].cells[1].firstChild.style.display="none";
    obj.bgColor=""; 
    changColour(row)
    }
    }
    function changColour(row){
    if(ctrl==false){
    for(i=0;i<table1.rows.length;i++){
    if(i!=row){
    table1.rows[i].cells[0].firstChild.checked=false;
    table1.rows[i].cells[1].firstChild.style.display="none";
    table1.rows[i].bgColor="";
    }
    }
    }
    if(shift==true){
    rowCount=Math.abs(row-beginRow)
    beginRow>row?row=row:row=beginRow;
    for(i=row;i<row+rowCount+1;i++){
    table1.rows[i].cells[0].firstChild.checked=true;
    table1.rows[i].cells[1].firstChild.style.display="";
    table1.rows[i].bgColor="red"; 
    }
    }
    }
    </script>
    <html  > 
    <head  > 
    <meta   http-equiv="Content-Type"   content="text/html;   charset=gb2312"  > 
    <title  >new   page  </title  > 
    </head  > 
    <body  > 
    <table   cellpadding="0"   border="1"   cellspacing="0"   width="400"   id="table1"   currentRow="0"  > 
    <tr bgcolor="red" > 
    <td width="10%" > <input type=checkbox checked > </td >
    <td width="10%" > <img style="display:block" src="http://community.csdn.net/ui/scripts/System/_resource/MzTreeView/file.gif" > </img >　 </td >
    <td width="80%" >　  </td > 
    </tr  > 
    <tr  > 
    <td  >  <input   type=checkbox  >　  </td  > 
    <td > <img style="display:none" src="http://community.csdn.net/ui/scripts/System/_resource/MzTreeView/file.gif" > </img >　  </td >
    <td  >　  </td  > 
    </tr  > 
    <tr  > 
    <td  >  <input   type=checkbox  >　  </td  > 
    <td > <img style="display:none" src="http://community.csdn.net/ui/scripts/System/_resource/MzTreeView/file.gif" > </img >　  </td >
    <td  >　  </td  > 
    </tr  > 
    <tr  > 
    <td  >  <input   type=checkbox  >　  </td  > 
    <td > <img style="display:none" src="http://community.csdn.net/ui/scripts/System/_resource/MzTreeView/file.gif" > </img >　  </td >
    <td  >　  </td  > 
    </tr  > 
    <tr  > 
    <td  >  <input   type=checkbox  >　  </td  > 
    <td > <img style="display:none" src="http://community.csdn.net/ui/scripts/System/_resource/MzTreeView/file.gif" > </img >　  </td >
    <td  >　  </td  > 
    </tr  > 
    <tr  > 
    <td  >  <input   type=checkbox  >　  </td  > 
    <td > <img style="display:none" src="http://community.csdn.net/ui/scripts/System/_resource/MzTreeView/file.gif" > </img >　  </td >
    <td  >　  </td  > 
    </tr  > 
    <tr  > 
    <td  >  <input   type=checkbox  >　  </td  > 
    <td > <img style="display:none" src="http://community.csdn.net/ui/scripts/System/_resource/MzTreeView/file.gif" > </img >　  </td >
    <td  >　  </td  > 
    </tr  > 
    <tr  > 
    <td  >  <input   type=checkbox  >　  </td  > 
    <td > <img style="display:none" src="http://community.csdn.net/ui/scripts/System/_resource/MzTreeView/file.gif" > </img >　  </td >
    <td  >　  </td  > 
    </tr  > 
    </table  > 
    </body  > </html  >