今天逛沸点看到个有趣的求助《怎么鼠标拖拽复制table中的某一列?》
这个需求其实就是excel的列选中,但网页上的table和excel是不一样的,网页选中文字必须要有开始光标和结束位置,tabel和普通段落文字一样,且可选中的块只能有一段,不可以同时选中不连续的两段文字的。如图所示,想要只想选择姓名和性别这两列的文字是做不到的。
这种情况下,常规的方式无法达成需求。但也不是说完全没辙,合理利用css的属性,也是可以做到的~
在这里,我们会用到css的 user-select 属性。
这个属性一般是用来控制用户能否选中文本的,当设置为 none 时,元素及其子元素的文本不可选中。
这个特性在我们的需求里的作用就发挥出来的了,简单点来说,就是将非目标 td 的 user-select 设置为 none ,内容不可选中;当我们需要复制指定 td 时,监听鼠标事件,将解锁目标 td 列。
废话不多说,直接上demo。
如果有别的有趣方案,可以找我聊聊哦~