table实现框选效果demo

286 阅读1分钟

最近遇到个需求:需要在table中实现框选并进行复制粘贴操作。 demo如下:

1.png

2.png

3.png

4.png

复制粘贴的思路:先标记每个td,标记最好用自定义属性,方法如下

微信截图_20220411103950.png 框选的时候分别计算行和列的差值,比如框选了00,01,10,11,行的差值为1-0=1,列的差值为1-0=1; 并标记框选的开始坐标copyStartRow=0;copyEndRow=0; 假如从02开始粘贴,获取到粘贴的开始坐标是startRow=0,startCol=2; 从0开始遍历行的差值并在循环中从0开始遍历列的差值,startRow + row, startCol + cold对应内容就是copyStartRow + row, copyEndRow+ col的内容 小伙伴如果有更好的思路麻烦提出来交流下!