Select text in a column of an html table

Question

Is it possible to select the text (i.e. have it highlighted so that it can be copy+pasted) of every cell in one vertical column of an HTML table.

Is there a JavaScript method, or perhaps an equivalent in some browsers to the Alt-Click-Drag shortcut used in many text editors?

Or is this impossible?

Answer 1

WIP: CSS only solution using :has() selector

The new :has() selector gave me hope in solving this issue without JS. The idea was to disable text selection for all cells, and only activate it for cells of a column that is hovered.

So you would have rule like this:

table:has(tr td:nth-child(1):hover) tr td:nth-child(1)  {
    -webkit-user-select: auto;
    user-select: auto;
}

A complete sample can be found here: https://codepen.io/catlan/pen/XWELegW

This is work in progress, because in the current version of Safari (15.6.1), the display of the text range disappears after the selection is done, only to reappear after moving the cursor for a few pixel. See https://bugs.webkit.org/show_bug.cgi?id=244445

It seems to work fine in Chrome starting with Version 105.

Answer 2

Here is a hack that doesn't involve javascript at all:

Step 1: open the inspector

For Chrome on mac, press command + option + J.

Step 2: select a random cell using the selector tool

For Chrome on mac, click the selector icon on the top left corner of the inspector to enter the selector mode.

Then click a random cell in the table.

Step 3: hide all cells by editing CSS

Click the New Style Rule button (see image below)

then enter this rule (you may want to modify it a little bit depending on your HTML)

tr td {
    display: none; # hide all cells
}

Now all cells should have disappeared.

Step 4: display only the column that you want by editing CSS

Go ahead and add another rule above that one:

tr td:nth-child(2) { # replace 2 with the index of the column you want to copy. 2 means the second column
    display: table-cell; # display that column
}

Now the column you want to copy from should have reappeared.

All the other columns should be invisible and can't be selected.

Step 5: just copy that column!

Note

• You can restore the page by refreshing.

• I find this work perfectly if you just want to select one column or two.

Answer 3

Some code review tools implement this to allow copying & pasting code from one side of a side-by-side diff. I looked into how ReviewBoard pulls it off.

The gist is:

1. When a column selection begins, style the cells in all other columns with user-select: none (and its prefixed variants, if necessary). This creates the appearance of a column selection. The other columns are still secretly selected, so you have to...
2. Intercept the copy event and change its payload to reflect the contents of the selected column.

The ReviewBoard code to do this consists of this CSS and this JavaScript.

I pulled it out into a fairly minimal jsbin demo.

Here's the CSS to create the appearance of a single-column selection (you add the selecting-left class to the table when the left column is being selected, or selecting-right for the right):

.selecting-left  td.right,
.selecting-left  td.right *,
.selecting-right td.left,
.selecting-right td.left *,
  user-select: none;
}

.selecting-left  td.right::selection,
.selecting-left  td.right *::selection,
.selecting-right td.left::selection,
.selecting-right td.left *::selection,
  background: transparent;
}

Here's the JavaScript to intercept the copy event and plug in a single column's worth of data:

tableEl.addEventListener('copy', function(e) {
  var clipboardData = e.clipboardData;
  var text = getSelectedText();
  clipboardData.setData('text', text);
  e.preventDefault();
});

function getSelectedText() {
  var sel = window.getSelection(),
      range = sel.getRangeAt(0),
      doc = range.cloneContents(),
      nodes = doc.querySelectorAll('tr'),
      text = '';

  var idx = selectedColumnIdx;  // 0 for left, 1 for right

  if (nodes.length === 0) {
    text = doc.textContent;
  } else {
    [].forEach.call(nodes, function(tr, i) {
      var td = tr.cells[tr.cells.length == 1 ? 0 : idx];
      text += (i ? '\n' : '') + td.textContent;
    });
  }

  return text;
}

There's also some less interesting code to add the selecting-left and selecting-right classes at the start of a selection. This would require a bit more work to generalize to n-column tables.

This seems to work well in practice, but it's surprising how hard it is!

Answer 4

You could have a div which gets populated with the column data on click and apply a css class to give the columns the appearence of being selected

something like this:

var $mytable = $("#mytable"),
    $copydiv = $("#copy_div");

$mytable.find("td").click(function(){

    //get the column index
    var $this = $(this),
        index = $this.parent().children().index($this);

    //find all cells in the same column
    $mytable.find("tr:nth-child(" + index + ")").removeClass("selected").each(function () {
        var $this = $(this);
        $this.addClass("selected");
        $copydiv.html($this.html() + "<br />");
    });
});

or you could have a separate table for each column, but I don't think that would be worth it.

Answer 5

What you're looking for is called Range object (TextRange in IE).

Update: Here's a working code to do what you're suggesting: http://jsfiddle.net/4BwGG/3/

While capturing cell contents, you can format them in any manner you wish. I'm simply appending a new line every time.

Note:

• Works fine in FF 3 and above
• IE (before 9) and Chrome do not support multiple selection.
• Chrome doesn't highlight all cells (but captures all content). Same goes for IE9
• IE 7 & 8 will throw an error.

An alternative is apply a CSS style that simulates highlighting on click of column header and loop through all cells to capture their content. Look and feel of this approach may differ from native selection's look (unless you somehow capture select event and alter the appearnce).

Then use jQuery copy plugin to copy them to clipboard.