最近碰到一个表格的增删问题,一个主要的问题在于需要用鼠标拖拽去选中区域,然后对选中的区域进行操作。在网上找了些代码,做了个总结。原理是在鼠标刚开始点击的点和鼠标移动的点,两个点之间生成一个矩形,然后用这个矩形去和表格中的td进行碰撞检测,但是因为是表格,当然会有行合并和列合并的问题。我的思路是使用递归函数,在每一次矩形和表格碰撞完之后,重新改变矩形的定位和宽高,然后再进行碰撞检测,直到达到某个条件时,停止。我在每个和矩形块碰撞到的td上加了一个class(grayColor),然后循环遍历,需要取到4个值,最小的距离上边框的距离(offset().top)、最大的距离上边框的距离(offset().top+outerHeight())、最小的距离左边框的距离(offset().left)、最大的距离左边框的距离(offset().left+outerWidth),然后对矩形块更新,宽度为最大距离左边框的距离减去最小的距离,高度同理,top值为最小的距离上边框的值,left值同理,然后再去和table内的td去做碰撞检测,直到后一次和前一次的所有距离相等,即两次的最小距离上边框的值、最大距离上边框的值、最小距离左边框的值、最大距离左边框的值都相等时,函数停止执行。这样做的好处是,不需要去考虑colspan的值和rowspan的值,反正我找的用colspan和rowspan的做处理的,我没有看懂,毕竟,我是一只小菜鸟。下面贴上代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
table {
border-collapse: collapse;