Transfer grid lines easily by copying and pasting directly from the webpage into a text document

Question

Transfer grid lines easily by copying and pasting directly from the webpage into a text document

Is there a way to have the grid lines included when copying grid data from a web page?

Currently, the copied result looks like this:

name subject
lolo math
fofo history

What I would like is:

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

I've searched online for a solution, but couldn't find one that works. I'm not very experienced with front-end tricks.

html css grid markup

Answer 1

Answer №1

If you're looking to achieve a similar functionality, consider implementing the following steps:

function alterCopiedText(event) {
    event.preventDefault();

    // Retrieve the original text that was selected
    var originaltext = window.getSelection();

    // Call a function to customize the original text with additional lines
    var modifiedtext = customizeText(originaltext);

    // Update the clipboard with the altered text
    if (window.clipboardData) {
        window.clipboardData.setData('Text', modifiedtext);
    }
}

// Listen for the copy event and take action accordingly
document.addEventListener('copy', alterCopiedText);

Ensure to tailor the logic within the customizeText function based on your specific requirements.

Answer 2

If you're looking to achieve a similar functionality, consider implementing the following steps:

function alterCopiedText(event) {
    event.preventDefault();

    // Retrieve the original text that was selected
    var originaltext = window.getSelection();

    // Call a function to customize the original text with additional lines
    var modifiedtext = customizeText(originaltext);

    // Update the clipboard with the altered text
    if (window.clipboardData) {
        window.clipboardData.setData('Text', modifiedtext);
    }
}

// Listen for the copy event and take action accordingly
document.addEventListener('copy', alterCopiedText);

Ensure to tailor the logic within the customizeText function based on your specific requirements.

Answer 3

Answer №2

To successfully implement a 'copy' event to your table, follow these steps:

//Assuming your table has an ID and it is stored in the variable myTable
document.getElementById(myTable).addEventListener('copy', function(e){
    e.preventDefault();
    e.clipboardData.setData("Text", parseClipboard(e.clipboardData.getData("Text")));
});

In this scenario, the function parseClipboard should be capable of processing the text in the clipboard according to your requirements. This may involve splitting the text using newline as the separator, adding | characters at the beginning and end of each line, and then rejoining them with newline---------------newline serving as the separator.

Answer 4

To successfully implement a 'copy' event to your table, follow these steps:

//Assuming your table has an ID and it is stored in the variable myTable
document.getElementById(myTable).addEventListener('copy', function(e){
    e.preventDefault();
    e.clipboardData.setData("Text", parseClipboard(e.clipboardData.getData("Text")));
});

In this scenario, the function parseClipboard should be capable of processing the text in the clipboard according to your requirements. This may involve splitting the text using newline as the separator, adding | characters at the beginning and end of each line, and then rejoining them with newline---------------newline serving as the separator.

Answer 5

Answer №3

After reviewing different approaches, I found a solution that combines elements from the suggestions provided above by incorporating Clipboard.js and parsing the copied text:

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

While implementing this solution, I encountered an issue where the split method was unable to detect new lines, leading me to continue refining the function addTableLines.

Answer 6

After reviewing different approaches, I found a solution that combines elements from the suggestions provided above by incorporating Clipboard.js and parsing the copied text:

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

While implementing this solution, I encountered an issue where the split method was unable to detect new lines, leading me to continue refining the function addTableLines.

Transfer grid lines easily by copying and pasting directly from the webpage into a text document

Answer №1

Answer №2

Answer №3

Similar questions

Difficulty encountered in setting the background image to cover the entire screen

Struggling to make the height attribute work in Bootstrap 4 alpha

Safari is having trouble displaying the tab content background properly, while Chrome is not experiencing any

JavaScript animation not functioning properly when height is set to "auto"

jQuery form validation with delay in error prompts

I'm seeking assistance in understanding the concept of padding in HTML and CSS - can you

JavaScript may not display height as anticipated

JQuery experiencing compatibility issues in both Firefox and Chrome

Arrangement featuring two distinct types of tiles

Arranging serialized information from a tabular format and retrieving specific data

Styling the Navigation in Wordpress

What is the best way to assign a variable date in JavaScript?

The Bootstrap 4 container class is known for leaving a peculiar dot next to the container

Is it possible to accurately measure the width of elements down to the partial pixel level?

By introducing margins, the final column will automatically create a new row

What is the best way to create multi-step selectors on an HTML webpage?

Using HTML and PHP, I am able to automatically redirect users to another

Experience the advanced NgPrime p-dropdown template with templating, filtering, and a clear icon that collapses when wrapped within a form element

Passing a number instead of a string in Reactjs onClick for the <MenuItem> element