本文介绍如何实现一个功能，允许用户通过鼠标拖拽在表格中选中区域，并处理行合并和列合并的问题。通过生成一个矩形并进行碰撞检测，再递归调整矩形的位置和大小，确保正确选中合并单元格。示例代码使用jQuery实现。
最近碰到一个表格的增删问题，一个主要的问题在于需要用鼠标拖拽去选中区域，然后对选中的区域进行操作。在网上找了些代码，做了个总结。原理是在鼠标刚开始点击的点和鼠标移动的点，两个点之间生成一个矩形，然后用这个矩形去和表格中的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;
最低0.47元/天 解锁文章
1011
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
