sorttable.js 在服务器上工作，但在内联时不工作

Question

我正在创建一个生成报告的工具，我想对它们进行“html 化”报告包含许多表格，这个 JAVA SCRIPT 包会很棒

https://kryogenix.org/code/browser/sorttable/

它有效 - 当且仅当 - 我从网络服务器中提取所有文件。 即：我的代码包含：

如果我内联模块并从服务器加载它，它就不起作用。

要求：我需要这些是独立文件，我的“用户/受害者”需要单击文件名并查看报告文件，而不是启动本地服务器等。

一个背景——例子：在嵌入式软件工程中你经常在编译你的文件时有一个链接映射文件，我想制作一个更好的HTML版本（除了纯文本）。 用户需要点击和查看这些类型的文件。 长期是一些交互式图形和图表，但是（婴儿步骤）最初可以排序的表格会很棒。

问题 1我尝试了什么

如果我像这样内联文件“sorttable.js”：

   <script>  ... body of sortable.js here ... </script>

我在我的浏览器（以及我尝试过的其他人）中看到垃圾，我看到我必须把它放在 HEAD 中，其他地方说：身体，我所做的一切似乎都不起作用。

问题 2我尝试过的其他方法

如果我尝试从 HTML 文件“旁边”的文件中加载图像，HTML 文件可能会以相同的方式加载“.png”或“.jpg” - 这些工作 - 但脚本没有，意思是：

   <script src="sorttable.js"></script>

所有浏览器都会产生相同的垃圾。

Answer 1

根据库页面，表必须具有sortable类，以便库找到这些表并应用排序功能。 您必须注入以下代码：

1. 注入可排序脚本
2. 等待可排序脚本加载完毕
3. 将sortable类添加到所有表
4. 重置sortable.init.done标志并重新初始化脚本

(function() {
  // Add sorttable.js to the page
  var po = document.createElement('script');
  po.type = 'text/javascript';
  po.async = true;
  po.src = 'https://kryogenix.org/code/browser/sorttable/sorttable.js';
  var s = document.getElementsByTagName('script')[0];
  s.parentNode.insertBefore(po, s);

  // set a timer to check and see when sorttable.js is loaded
  let timer = setInterval(() => {
    if (window.sorttable) {
      // Clear the timer
      clearInterval(timer);

      // Get all tables in the page
      let tables = document.querySelectorAll('table');

      // Add sortable class to each table
      tables.forEach((table) => table.classList.add('sortable'));

      // Reset sorttable done flag
      window.sorttable.init.done = false;

      // Re-run sorttable init code
      window.sorttable.init();
    }
  }, 200);
})();

您可以检查此代码是否有效：

1. 打开一个包含一些表格的页面，例如HTML 表格
2. 打开控制台（ Widnows 上的 F12 ）
3. 粘贴上面的代码并按回车

您应该会看到该表现在是可排序的。