Search code examples
htmlcssgridmarkup

Copy grid lines when user copies the grid from webpage and paste it into notepad


The user would like to have the grid lines copied with the grid data when he copies from the web page. Is that possible ?

currently the result of copying is something like:

name subject
lolo math
fofo history

what I want to have is:

  |  name | subject |
   ---------------
  |  lolo | math    |
   ---------------
  |  fofo | history |

I googled that but I couldn't find a good solution for that, and I'm not experienced in front-end tricks.


Solution

  • My solution was a mix of the solutions above use Clipboard.js and parse the copied text:

      new Clipboard('.clipboard-btn', {
        text: function (trigger) {
          var originaltext = $(trigger).next('table').closest("#my-tbl").text();
          return addTableLines(originaltext);
        }
      });
    

    I'm still writing addTableLines because the split is not detecting the new lines.