jquery table 鼠标选中单元格效果

来源：互联网发布：尸者的帝国知乎编辑：程序博客网时间：2024/05/17 03:04
<html><head><title>jquery table 选中效果</title><script type="text/javascript" src="http://www.srcfans.com/js/jquery-1.9.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;}.td_bg{background:#FFAA00;}</style><script>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></head><body><table 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></table></body></html>
阅读全文
1 0