html 表的列中的 Select 文本

Question

是否可以 select HTML 表的一個垂直列中的每個單元格的文本（即突出顯示以便可以復制+粘貼）。

是否有 JavaScript 方法，或者在某些瀏覽器中可能與許多文本編輯器中使用的 Alt-Click-Drag 快捷方式等效？

或者這是不可能的？

Answer 1

您要查找的內容稱為Range object（IE 中的TextRange ）。

更新：這是執行您建議的工作代碼： http://jsfiddle.net/4BwGG/3/

在捕獲單元格內容時，您可以以任何您希望的方式對其進行格式化。 我只是每次都添加一個新行。

筆記：

• 在 FF 3 及更高版本中運行良好
• IE（9 之前）和 Chrome 不支持多選。
• Chrome 不會突出顯示所有單元格（但會捕獲所有內容）。 IE9 也一樣
• IE 7 & 8 會拋出錯誤。

另一種方法是應用 CSS 樣式，該樣式模擬單擊 header 列時突出顯示並遍歷所有單元格以捕獲其內容。 這種方法的外觀和感覺可能與原生選擇的外觀不同（除非您以某種方式捕獲 select 事件並更改外觀）。

然后使用 jQuery 復制插件將它們復制到剪貼板。

Answer 2

一些代碼審查工具實現了這一點，以允許從並排差異的一側復制和粘貼代碼。 我研究了ReviewBoard是如何做到這一點的。

要點是：

1. 當列選擇開始時，使用user-select: none （及其前綴變體，如有必要）設置所有其他列中的單元格樣式。 這將創建列選擇的外觀。 其他欄目還是偷偷選的，所以你要...
2. 攔截copy事件並更改其有效負載以反映所選列的內容。

執行此操作的 ReviewBoard 代碼包含此 CSS和此 JavaScript 。

我將它提取到一個相當小的jsbin 演示中。

這是CSS，可以創建單列選擇的外觀（您將selecting-left selecting-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;
}

這是 JavaScript 攔截copy事件並插入單個列的數據：

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;
}

還有一些不太有趣的代碼可以在選擇的開頭添加selecting-left和selecting-right類。 這將需要更多的工作來推廣到 n 列表。

這在實踐中似乎效果很好，但令人驚訝的是它有多難！

Answer 3

您可以有一個 div，在單擊時填充列數據並應用 css class 以使列具有被選中的外觀

像這樣的東西：

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 />");
    });
});

或者您可以為每一列設置一個單獨的表格，但我認為這不值得。

Answer 4

這是一個完全不涉及 javascript 的 hack：

第一步：打開檢查器

對於 Mac 上的 Chrome，請按command + option + J 。

步驟2：select 使用選擇器工具隨機單元格

對於 Mac 上的 Chrome，單擊檢查器左上角的選擇器圖標進入選擇器模式。

然后單擊表中的隨機單元格。

第 3 步：通過編輯 CSS 隱藏所有單元格

單擊“ New Style Rule按鈕（見下圖）

然后輸入這個規則（你可能想根據你的 HTML 稍微修改一下）

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

現在所有的細胞都應該消失了。

第 4 步：通過編輯 CSS 僅顯示您想要的列

Go 前面並在該規則之上添加另一條規則：

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
}

現在，您要從中復制的列應該已經重新出現了。

所有其他列應該是不可見的並且不能被選中。

第 5 步：只需復制該列！

筆記

• 您可以通過刷新來恢復頁面。

• 如果您只想 select 一兩列，我發現這項工作非常完美。

Answer 5

WIP：CSS 唯一解決方案使用：has() 選擇器

新的:has()選擇器給了我在沒有 JS 的情況下解決這個問題的希望。 這個想法是禁用所有單元格的文本選擇，並且只為懸停的列的單元格激活它。

所以你會有這樣的規則：

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

可在此處找到完整示例： https://codepen.io/catlan/pen/XWELegW

這是正在進行中的工作，因為在當前版本的 Safari (15.6.1) 中，文本范圍的顯示在選擇完成后消失，僅在移動 cursor 幾個像素后重新出現。 見https://bugs.webkit.org/show_bug.cgi?id=244445