<html>
<head>
<title>jquery table 選中效果</title>
<script type="text/javascript" src="js/jquery-1.10.1.min.js"></script>
<style>
.tb{
cellspacing:0px;
border-spacing: 0px;
border:1px solid #000;
}
.tb td{
width:100px;
height:50px;
border:1px solid #000;
}
th{
width:100px;
height:50px;
border:1px solid #ddd;
background: #eee;
}
.td_bg{
background:#FFAA00;
}
</style>
<script>
//table 鼠標連續選中
var mouse_begin={x:0,y:0};
var mouse_end={x:0,y:0};
$(function(){
init();
$("body").mousedown(function(){
$(".tb td").removeClass('td_bg');//點擊表格之外的部分，清空所有選中
})
})
function init(){
mouseDown();
mouseUp();
}
function mouseDown(){
$(".tb td").mousedown(function(e){
e.stopPropagation();//阻止繼承父元素document的mousedown事件
mouse_begin={x:$(this).parent().parent().find("tr").index($(this).parent()[0]),y:$(this).parent().find("td").index($(this)[0])};
$(".tb td").removeClass('td_bg');//清空所有選中
$(this).addClass('td_bg');
mouseMove();
});
}
function mouseMove(){
$(".tb td").mouseover(function(){
$(".tb td").removeClass('td_bg');//清空所有選中
mouse_end={x:$(this).parent().parent().find("tr").index($(this).parent()[0]),y:$(this).parent().find("td").index($(this)[0])};
var maxX=mouse_begin.x<mouse_end.x?mouse_end.x:mouse_begin.x;
var minX=mouse_begin.x<mouse_end.x?mouse_begin.x:mouse_end.x;
var maxY=mouse_begin.y<mouse_end.y?mouse_end.y:mouse_begin.y;
var minY=mouse_begin.y<mouse_end.y?mouse_begin.y:mouse_end.y;
for(var i=minX;i<=maxX;i++){
for(var j=minY;j<=maxY;j++){
$(".tb tr:eq("+i+") td:eq("+j+")").addClass('td_bg');
}
}
//$(this).addClass('td_bg');
});
}
function mouseUp(){
$(".tb td").mouseup(function(){
$(".tb td").unbind('mouseover');
});
}
</script>
<body>
<table onselectstart="return false;">
<thead>
<tr>
<th></th>
<th></th>
<th></th>
<th></th>
</tr>
</thead>
<tbody id="tb" class="tb">
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</body>
