在html表的列中选择文本

Question

是否可以选择HTML表格的一个垂直列中的每个单元格的文本（即将其突出显示以便可以复制和粘贴）。

在许多文本编辑器中使用的Alt-Click-Drag快捷方式中是否有JavaScript方法，或某些浏览器中的等效方法？

或者这不可能吗？

Answer 1

您正在寻找的内容称为Range对象（IE中为TextRange）。

<强>更新 这是一个可以执行您建议的工作代码：http://jsfiddle.net/4BwGG/3/

在捕获单元格内容时，您可以以任何方式格式化它们。我只是每次都添加一个新行。

注意：

• 在FF 3及以上版本中正常工作
• IE（9之前）和Chrome不支持多重选择。
• Chrome不会突出显示所有单元格（但会捕获所有内容）。 IE9也是如此。
• IE 7＆amp; 8会抛出错误。

另一种方法是应用一种CSS样式，模拟突出显示单击列标题并循环遍历所有单元格以捕获其内容。这种方法的外观和感觉可能与原生选择的外观不同（除非您以某种方式捕获选择事件并改变出现）。

然后使用jQuery复制插件将它们复制到剪贴板。

Answer 2

一些代码审查工具实现了这一点，以允许复制和从并排差异的一侧粘贴代码。我调查了ReviewBoard如何将其拉下来。

要点是：

1. 当列选择开始时，使用user-select: none（及其前缀变体if necessary）为所有其他列设置单元格样式。这会创建列选择的外观。其他列仍然是秘密选择的，所以你必须......
2. 拦截copy事件并更改其有效负载以反映所选列的内容。

执行此操作的ReviewBoard代码包含this CSS和this JavaScript。

我把它拉到了一个相当小的jsbin demo。

这里是用于创建单列选择外观的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;
}

这是用来拦截copy事件并插入一列数据的JavaScript：

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类来为列提供被选中的外观

类似的东西：

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的黑客：

步骤1：打开检查器

对于Mac上的Chrome，请按command + option + J。

步骤2：使用选择器工具选择随机单元格

对于Mac上的Chrome，请单击检查器左上角的选择器图标以进入选择器模式。

然后单击表格中的随机单元格。

第3步：通过编辑CSS隐藏所有单元格

单击New Style Rule按钮（请参见下图）

然后输入此规则（您可能需要根据HTML对其进行一些修改）

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

现在所有细胞都应该消失了。

步骤4：通过编辑CSS仅显示所需的列

继续，在该规则之上添加另一条规则：

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步：只需复制该列！

注意

• 您可以通过刷新来恢复页面。

• 如果您只想选择一两列，我发现此方法非常理想。