Today stroll boiling point to see an interesting help “how to mouse drag copy a table column?”
This requirement is actually column selection in Excel, but the table on the web page is different from excel. The selected text on the web page must have a start cursor and an end position. Tabel is the same as ordinary paragraph text, and only one block can be selected, and two discontinuous text cannot be selected at the same time. As you can see, it is not possible to select only the name and gender columns.
In this case, the conventional approach does not meet the requirements. This is not to say that there is nothing to be done. It is possible to use CSS attributes properly
In this case, we’re going to use the CSS user-select property.
This attribute is generally used to control whether the user can select text. When set to None, the text of an element and its children is unselected.
This feature comes into play in our requirement. To put it simply, set user-select to None for non-target TDS and make the contents unselected. When we need to copy the specified TD, listen for mouse events that will unlock the target TD column.
So without further ado, let’s go to the demo.
Example: Github: [TableSelect]
Let me know if you have any other interesting plans