Jquery库：

jquery -1.10.2.min.js，jQuery UI - v1.12.1 .

JQuery代码

没什么好说的，代码之间。看你不懂的笔记。

脚本类型='text/javascript' //鼠标按下时的X Y坐标var mouseDownXvar MouseFrOm//鼠标按下时移动的X Y坐标var mouseMoveXvar mouseMoveY//移动的状态var isMove=false/*初始化选择框*/function init() { $('#selected ')).css('display '，' none ')；$(“# selected”).css('top '，' 0 ')；$(“# selected”).css('left '，' 0 ')；$(“# selected”).css('width '，' 0 ')；$(“# selected”).css('height '，' 0 ')；} $(文档)。ready(function(){ init()；var选定DD=新Array()；//创建被选中表格数组var TD=$(' TD ')；//获取所有表格信息for(var I=0；一、道明长度；I){选定的DD。推送(TD[I])；} $(“# TableDiv”).鼠标向下(函数（事件){鼠标按下x=事件。客户端x-$(这个).偏移量()。向左；老鼠霜降=event.clientY - $(this).偏移量()。顶部；控制台。日志(' MouseDownx=' MouseDownx '鼠标霜降='鼠标霜降');if(事件。目标。身份证。match(/selected/){ IsMove=true；} //鼠标按下并移动时进行判断（拖拽或者画框)$('#tableDiv ').鼠标移动(函数（事件){ mouseMoveX=事件。客户端x-$(这个).偏移量()。向左；mouseMoveY=事件。客户-$(这个).偏移量()。顶部；var selectDiv=文档。getelementbyid('选定')；if (isMove) { //拖拽的代码，因为实在不想算正常男性染色体组型了，所以使用了jquery ui $("# selected ").可拖动();//这部分是负责画框的时候，实时把框住的表格变色的，(代码和下面的代码重复了)var left=selectDiv.offsetLeft，top=selectDiv.offsetTop宽度=selectDiv.offsetWidth，高度=selectdiv . offsethightfor(var I=0；我选择了长度；I){ var sl=选定的DD[I].选择的偏移量偏移距离=选定的距离.偏置选择了偏置offsetTopif (sl左上方选择了D[i].选择左宽度偏置[i].偏移顶部高度){ if(选中dD[I]。类名。index of(' selected ')===-1){ selected dD[I].{ selected } } else { if(selected d[I])。类名。索引of('选定')！=-1){选定的DD[I].类名=' TD} } } } else { //重复的代码，完了再把它抽取出来var left=selectDiv.offsetLeft，top=selectDiv.offsetTop宽度=selectDiv.offsetWidth，高度=selectdiv . offsethightfor(var I=0；我选择了长度；I){ var sl=选定的DD[I].选择的偏移量偏移距离=选定的距离.偏置选择了偏置offsetTopif (sl左上方选择了D[i].选择左宽度偏置[i].偏移顶部高度){ if(选中dD[I]。类名。index of(' selected ')===-1){ selected dD[I].{ selected } } else { if(selected d[I])。类名。索引of('选定')！=-1){选定的DD[I].类名=' TD} } } //鼠标抬起结束画框，和拖动$('#tableDiv ').鼠标上移(function(){ console。日志(' MouseUpx=' Mousemovex ' MouseUpy=' Mousemovex ')；isMove=false$(这个)。解除绑定(“鼠标移动”)；}) //画框显示选定的（鼠标柔和、鼠标向下、鼠标移动、鼠标移动);} }) }) //当鼠标在已经画好的框上时，改变鼠标指针样式，就是十字形了$(“# selected”).mouseenter(函数(){ $(“# selected”).css(“”光标','移动');});});函数显示选定内容(鼠标霜降、mouseDownX、mouseUpX、mouseUpY) { $('#selected ').css('display '，' block ')；$(“# selected”).css('top '，MouseFunction)；$(“# selected”).css('left '，MouseDownx)；var moveX=Mousemovex-MouseDownx；var moveY=Mousemovey-鼠标霜降；if(moveY 0){ $(“# selected”)).css('top '，event.clientY - $('#table ').偏移量()。顶部);} if(moveX 0){ $(“# selected”).css('left '，event.clientX - $('#table ').偏移量()。左);} $(“# selected”).css('width '，数学。ABS(moveX))；$(“# selected”).css('高度'，数学。ABS(moveY))；}/脚本测试用的超文本标记语言

使用桌子进行的测试：

div id=' TableDiv ' style=' width : 1500 px；高度： 1500像素；top: 100pxleft:100px绝对位置：'div id='选定'样式='边框：5 px点状rgb(239，37，17)；绝对位置：显示器：无/div表格边框='1 '样式=' width : 1500 px ' height : 1500 px ' id=' table ' tr TD id=' 1 ' class=' TD '/TD TD TD TD id=' 2 ' class=' TD '/TD TD TD TD id=' 3 ' class=' TD '/TD TD TD TD TD id=' 4 ' class=' TD '/TD TD TD TD id=' 5 ' class=' TD '/TD TD TD TD id=' 6 ' class=TD '/TD/tr TD id=' 7 ' class=' TD '/TD TD TD TD id=' 8 ' class=' TD '/TD TD TD id=' 9 ' class=' TD '/TD-表格代码太多所以.- /div效果图

以上所述是小编给大家介绍的jQuery实现鼠标画框并对框内数据选中的实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！