<!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>
