internet-explorer - jquery tablesorter 自定义解析器 - innerHTML 与 innerText

Question

我正在使用 tablesorter 并尝试创建自定义排序解析器 - 解析器在 Firefox 中运行良好，但在 Internet Explorer 中完全失败。为什么解析器在一个中工作，而不是另一个？

Answer 1

在我的 tablesorter 分支中，我还发现textContent在 IE9（当然还有所有其他现代浏览器）中使用起来要快得多，所以我修改了内部编码以自动执行此操作：

if (config.supportsTextContent) {
    text = node.textContent; // newer browsers support this
} else {
    text = $(node).text();
}

我还对该textExtraction选项进行了一些其他改进，使您可以获取cellIndex和/或为特定列添加函数。

Answer 2

当您创建自定义解析器时，tablesorter 使用此函数：getElementText(config, node)

getElementText 将尝试从表格单元格中获取文本 - 但某些表格单元格也可能包含 html 标记。包含其他 html 标签（如 [span] 或 [img]）的单元格 [td] 标签会导致 IE 出现问题，因为该函数只是抓取单元格的所有 innerHTML（包括无关标签），而不仅仅是 IE 支持的 innerText。

getElementText 函数在 Firefox 中运行良好，因为该函数获取 Firefox 支持的（不言自明的）文本内容，忽略单元格中的 html 标记。请参阅相关问题：jQuery tablesorter: custom html image tag sorter/parser

解决此问题的最佳方法是首先让tablesorter 根据浏览器支持的innerText 或textContent 正确抓取单元格文本。Kling 的回答帮助我走上了正确的道路： How to clear tags from a string with JavaScript

打开 tablesorter.js 文件并修改如下所示的 getElementText(config, node) 部分。我也已将此建议提交给 tablesorter 作者。

用 innerText 替换 innerHTML：

if (config.supportsTextContent) {
    text = node.textContent;
} else {
    if (node.childNodes[0] && node.childNodes[0].hasChildNodes()) {
        text = node.childNodes[0].innerText;
    } else {
        text = node.innerText;
    }
}