突出显示 HTML 表格中的所有数据答案

【问题标题】：Highlight all data in a HTML Table突出显示 HTML 表格中的所有数据
【发布时间】：2010-11-26 16:38:46
【问题描述】：

有没有办法对 HTML 表格中的所有元素进行选择突出显示？

我希望能够以表格形式显示数据，并且用户能够单击按钮选择相关数据以复制并粘贴到他们选择的电子表格中。

【问题讨论】：

标签： javascript html dom html-table spreadsheet

【解决方案1】：

试试这个：

function selectAll(parentNode) {
    var sel;
    // IE
    if (document.selection) {
        sel = document.body.createTextRange();
        sel.moveToElementText(parentNode);
        sel.select();
    } else {
        sel = document.createRange();
        sel.setStartBefore(parentNode);
        sel.setEndAfter(parentNode);
        window.getSelection().addRange(sel);
    }
}

selectAll(document.getElementById('myTable'));

测试一下here。

【讨论】：

【解决方案2】：

由于大多数浏览器已经通过让用户手动选择文本来提供此功能，为什么不向用户提供一个链接以下载 Excel 兼容格式的数据，例如 CSV？例如，如果您有足够的数据需要分页，这是一个更强大的解决方案。

【讨论】：

【解决方案3】：

当我为选择数据的 API 编写抽象时，我编写了以下 cmets。您可能会发现各种 URL（我在 cmets 中引用过）很有用。

这个接口不是基于 W3C 标准。相反，它基于 de 来自各种不同的事实接口浏览器。它代表对象当您调用 javascript window.getSelection() 方法如在 http://www.quirksmode.org/dom/range_intro.html

这个界面的MS IE版本是 “选择”对象的类型可以找到的 Microsoft API 通过 http://www.google.ca/search?hl=en&q=html+and+dhtml+reference

但是这个界面基于更多在 Mozilla API 上（而不是 MS IE API）。 Mozilla 界面可以是发现于 http://mxr.mozilla.org/mozilla/source/content/base/public/nsISelection.idl 和 https://developer.mozilla.org/en/DOM/Selection

如果您使用像 jquery 这样的 Javascript 库，这可能会为您隐藏/抽象浏览器特定的差异并为您提供统一的 API。

【讨论】：

删除多余的文本并将链接发布为，呃，链接怎么样？