<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title> new document </title> <meta name="generator" content="editplus" /> <meta name="author" content="" /> <meta name="keywords" content="" /> <meta name="description" content="" /> <!-- code --> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <!-- out css --> <link type="text/css" rel="stylesheet" href="./common/base.css"/> <link type="text/css" rel="stylesheet" href="./common/table.css"/> <!-- page css --> <style type="text/css"> .bodyWarper { width:98%; } </style> <!-- out javascripts --> <script language="javascript" type="text/javascript" src="./common/jquery-1.4.4.min.js"></script> <!-- page javascripts --> <script language="javascript" type="text/javascript" > //ctrl 按键是否按下 var K_CTRL = false; var K_SHIFT = false; var selNum = 0 ; //记录shift按键，第一次选择的tr var priorSelNode; //加载客户 function loadSelCus(cusId) { //alert(cusId); } $(document) .keydown(function(event){ switch(event.keyCode) { case 17 : K_CTRL = true ; break; case 16 : K_SHIFT = true ; break; default : K_CTRL = false; K_SHIFT = false; break; } }) .keyup(function(event) { switch(event.keyCode) { case 17 : K_CTRL = false ; break; case 16 : K_SHIFT = false ; break; default : K_CTRL = false; K_SHIFT = false; break; } }) .ready(function () { $("#tableContent tr") .click(function (event) { //ctrl 与 shift 同时按下 if (K_CTRL && K_SHIFT) { return ; } //没有按shift,也没有按ctrl，不选择任何元素 if(!K_SHIFT && !K_CTRL) { $(this).addClass("trFocus").siblings().removeClass("trFocus"); $("#tableContent tr").find(":checkbox").attr("checked",""); priorSelNode = $(this)[0]; var cusId = $(this).find(":checkbox").val(); loadSelCus(cusId); } //按住ctrl且不按住shift if(!K_SHIFT && K_CTRL) { $(this).find(":checkbox").attr("checked","checked"); $(this).addClass("trFocus"); $(priorSelNode).find(":checkbox").attr("checked","checked"); priorSelNode = $(this)[0]; } //按住shift if (K_SHIFT && !K_CTRL) { var startTRIndex = 0; var endTRIndex = 0; startTRIndex = Number($(priorSelNode).attr("rowindex")); endTRIndex = Number($(this).attr("rowindex")); var objs = $("#tableContent tr"); if (endTRIndex >= startTRIndex){ for (var i = startTRIndex ; i <= endTRIndex ; i++) { $(objs[i]).addClass("trFocus"); $(objs[i]).find(":checkbox").attr("checked","checked"); } } else { for (var i = startTRIndex ; i >= endTRIndex ; i--) { alert(i); $(objs[i]).addClass("trFocus"); $(objs[i]).find(":checkbox").attr("checked","checked"); } } K_SHIFT = false; priorSelNode = $(this)[0]; } }) .hover(function () { $(this).addClass("trHover").siblings().removeClass("trHover"); }); $("#tableContent tr :checkbox").click(function (event) { event.stopPropagation(); var checked = $(this).attr("checked"); var $pTr = $(this).parents("tr"); if (checked) { $pTr.addClass("trFocus"); }else { $pTr.removeClass("trFocus"); } }); }); </script> </head> <body> <table id="tableMain"> <tbody id="tableContent"> <tr id="tr_001" rowindex="0" selectState="no"> <td>1<input type="checkbox" name="optIds" value="1"/> </td><td>方明</td><td>13986547891</td> </tr> <tr id="tr_002" rowindex="1" selectState="no"> <td>2<input type="checkbox" name="optIds" value="2"/> </td><td>方明1</td><td>13986547891</td> </tr> <tr id="tr_003" rowindex="2" selectState="no"> <td>3<input type="checkbox" name="optIds" value="3"/> </td><td>方明2</td><td>13986547891</td> </tr> <tr id="tr_004" rowindex="3" selectState="no"> <td>4<input type="checkbox" name="optIds" value="4"/> </td><td>方明3</td><td>13986547891</td> </tr> <tr id="tr_005" rowindex="4" selectState="no"> <td>5<input type="checkbox" name="optIds" value="5"/> </td><td>方明</td><td>13986547891</td> </tr> <tr id="tr_006" rowindex="5" selectState="no"> <td>6<input type="checkbox" name="optIds" value="6"/> </td><td>方明1</td><td>13986547891</td> </tr> <tr id="tr_007" rowindex="6" selectState="no"> <td>7<input type="checkbox" name="optIds" value="7"/> </td><td>方明2</td><td>13986547891</td> </tr> <tr id="tr_008" rowindex="7" selectState="no"> <td>8<input type="checkbox" name="optIds" value="8"/> </td><td>方明3</td><td>13986547891</td> </tr> <tr id="tr_009" rowindex="8" selectState="no"> <td>9<input type="checkbox" name="optIds" value="9"/> </td><td>方明</td><td>13986547891</td> </tr> <tr id="tr_010" rowindex="9" selectState="no"> <td>10<input type="checkbox" name="optIds" value="10"/> </td><td>方明1</td><td>13986547891</td> </tr> <tr id="tr_011" rowindex="10" selectState="no"> <td>11<input type="checkbox" name="optIds" value="11"/> </td><td>方明2</td><td>13986547891</td> </tr> <tr id="tr_012" rowindex="11" selectState="no"> <td>12<input type="checkbox" name="optIds" value="12"/> </td><td>方明3</td><td>13986547891</td> </tr> </tbody> </table> </body> </html>