javascript - 尝试使用 w3.js 对表进行排序，但它没有正确对数字进行排序-6ren

javascript - 尝试使用 w3.js 对表进行排序，但它没有正确对数字进行排序

转载作者：行者123 更新时间：2023-12-03 00:47:00

25

4

我正在排序的表格如下。

<!DOCTYPE html>
<html>

<title>W3.JS</title>
<meta charset="utf-8">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<script src="https://www.w3schools.com/lib/w3.js"></script>
<body class="w3-container">

<h2>Testing W3.JS with CSS</h2>

<h2>Sort Tables</h2>

<p>Click the table headers to sort the  table accordingly:</p>

<table id="myTable" class="w3-table-all">
  <tr>
    <th onclick="w3.sortHTML('#myTable', '.item', 'td:nth-child(1)')" style="cursor:pointer">Name</th>
    <th onclick="w3.sortHTML('#myTable', '.item', 'td:nth-child(2)')" style="cursor:pointer">Random Number</th>
  </tr>
  <tr class="item">
    <td>Berglunds snabbköp</td>
    <td>6</td>
  </tr>
  <tr class="item">
    <td>North/South</td>
    <td>1</td>
  </tr>
  <tr class="item">
    <td>Alfreds Futterkiste</td>
    <td>2</td>
  </tr>
  <tr class="item">
    <td>Königlich Essen</td>
    <td>5</td>
  </tr>
  <tr class="item">
    <td>Magazzini Alimentari Riuniti</td>
    <td>4</td>
  </tr>
  <tr class="item">
    <td>Paris spécialités</td>
    <td>10</td>
  </tr>
  <tr class="item">
    <td>Island Trading</td>
    <td>6</td>
  </tr>
  <tr class="item">
    <td>Laughing Bacchus Winecellars</td>
    <td>102</td>
  </tr>
</table>

</body>
</html>

似乎进行排序的代码部分来自:https://www.w3schools.com/lib/w3.js

w3.sortHTML = function(id, sel, sortvalue) {
  var a, b, i, ii, y, bytt, v1, v2, cc, j;
  a = w3.getElements(id);
  for (i = 0; i < a.length; i++) {
    for (j = 0; j < 2; j++) {
      cc = 0;
      y = 1;
      while (y == 1) {
        y = 0;
        b = a[i].querySelectorAll(sel);
        for (ii = 0; ii < (b.length - 1); ii++) {
          bytt = 0;
          if (sortvalue) {
            v1 = b[ii].querySelector(sortvalue).innerHTML.toLowerCase();
            v2 = b[ii + 1].querySelector(sortvalue).innerHTML.toLowerCase();
          } else {
            v1 = b[ii].innerHTML.toLowerCase();
            v2 = b[ii + 1].innerHTML.toLowerCase();
          }
          if ((j == 0 && (v1 > v2)) || (j == 1 && (v1 < v2))) {
            bytt = 1;
            break;
          }
        }
        if (bytt == 1) {
          b[ii].parentNode.insertBefore(b[ii + 1], b[ii]);
          y = 1;
          cc++;
        }
      }
      if (cc > 0) {break;}
    }
  }
};

如何修改它以便正确对数字进行排序？

最佳答案

问题是 w3.sortHTML通过 (v1 > v2) 排序和(v1 < v2) ，其中v1和v2每个文本字符串 - 当然，不会考虑数字字符串并按照您期望的方式对它们进行排序。假设你不想猴子补丁 w3.sortHTML ，您可以创建自己的函数来执行类似的操作，但使用 localeCompare的numeric选项:

const myTable = document.querySelector('#myTable');
// select all trs below the header:
const trs = [...myTable.querySelectorAll('tr')].slice(1);

myTable.addEventListener('click', ({ target }) => {
  if (!target.matches('th')) return;
  const thIndex = Array.prototype.indexOf.call(target.parentElement.children, target);
  const getText = tr => tr.children[thIndex].textContent;
  trs.sort((a, b) => getText(a).localeCompare(getText(b), undefined, { numeric: true }));
  trs.forEach(tr => myTable.appendChild(tr));
});

<table id="myTable" class="w3-table-all">
  <tr>
    <th style="cursor:pointer">Name</th>
    <th style="cursor:pointer">Random Number</th>
  </tr>
  <tr class="item">
    <td>Berglunds snabbköp</td>
    <td>6</td>
  </tr>
  <tr class="item">
    <td>North/South</td>
    <td>1</td>
  </tr>
  <tr class="item">
    <td>Alfreds Futterkiste</td>
    <td>2</td>
  </tr>
  <tr class="item">
    <td>Königlich Essen</td>
    <td>5</td>
  </tr>
  <tr class="item">
    <td>Magazzini Alimentari Riuniti</td>
    <td>4</td>
  </tr>
  <tr class="item">
    <td>Paris spécialités</td>
    <td>10</td>
  </tr>
  <tr class="item">
    <td>Island Trading</td>
    <td>6</td>
  </tr>
  <tr class="item">
    <td>Laughing Bacchus Winecellars</td>
    <td>102</td>
  </tr>
</table>

要在单击两次后反向排序，请使用一个持久对象来跟踪最后排序的顺序:

const myTable = document.querySelector('#myTable');
// select all trs below the header:
const trs = [...myTable.querySelectorAll('tr')].slice(1);
const sortAscending = {
  0: 1,
  1: 1
};
myTable.addEventListener('click', ({ target }) => {
  if (!target.matches('th')) return;
  const thIndex = Array.prototype.indexOf.call(target.parentElement.children, target);
  const getText = tr => tr.children[thIndex].textContent;
  trs.sort((a, b) => (
    getText(a).localeCompare(getText(b), undefined, { numeric: true })
    * sortAscending[thIndex]
  ));
  trs.forEach(tr => myTable.appendChild(tr));
  sortAscending[thIndex] *= -1;
});

<table id="myTable" class="w3-table-all">
  <tr>
    <th style="cursor:pointer">Name</th>
    <th style="cursor:pointer">Random Number</th>
  </tr>
  <tr class="item">
    <td>Berglunds snabbköp</td>
    <td>6</td>
  </tr>
  <tr class="item">
    <td>North/South</td>
    <td>1</td>
  </tr>
  <tr class="item">
    <td>Alfreds Futterkiste</td>
    <td>2</td>
  </tr>
  <tr class="item">
    <td>Königlich Essen</td>
    <td>5</td>
  </tr>
  <tr class="item">
    <td>Magazzini Alimentari Riuniti</td>
    <td>4</td>
  </tr>
  <tr class="item">
    <td>Paris spécialités</td>
    <td>10</td>
  </tr>
  <tr class="item">
    <td>Island Trading</td>
    <td>6</td>
  </tr>
  <tr class="item">
    <td>Laughing Bacchus Winecellars</td>
    <td>102</td>
  </tr>
</table>

关于javascript - 尝试使用 w3.js 对表进行排序，但它没有正确对数字进行排序，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53202862/

25

4

0

文章推荐： javascript - 带有 XSS 的 CRSF 将 GET 请求中的 % 解析为 %25

文章推荐： javascript - .each() 不循环所有元素 - jQuery

文章推荐： javascript - Knex 和 SQL 数据库的引号问题

解读邮箱正则表达式：^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$
验证邮箱的正则表达式 var ePattern = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/; 或者
java - 使用正则表达式拆分字符串\w\w*?\w+?
我正在学习正则表达式并认为我开始掌握了。但是…… 我试图拆分一个字符串，我需要帮助来理解这样一个简单的事情: String input = "abcde"; System.out.println("[
c++ - 'W' 打印出 W， "W"打印出 $。为什么？
我是初学者。我不知道为什么？我正在使用 Code::Blocks。请阅读以下代码: 如果 q=' W '，则打印出 W。如果 q=" W "，则打印出 $。最佳答案文字 "W" 不是单个 cha
regex - REGEXP_EXTRACT(word,r'(\w\w\'\w\w)' ) 中的 r 是什么意思
我在 BigQuery Reference 或 re2 wiki 中都找不到答案。在 BigQuery Reference 中 Regex 部分的所有示例中，每个 regex 之前都有一个“r”，但
java - 当 "X px"仅被按下一次时使 block /角色移动 "W or w"，并且当 "W and w"被按住时不继续行走
当我按“W 或 w”但仅一次时，我想让我的矩形/字符移动“X px”。按住“W”和“w”时不继续移动。我尝试使用一个变量创建一个“Key Released”函数，该变量在按下“W 或 w”时会发生变化
ruby - Ruby 中的 %w{} 和 %W{} 大写和小写百分比 W 数组文字有什么区别？
%w[ ] Non-interpolated Array of words, separated by whitespace %W[ ] Interpolated Array of words
Vim 'w' 表现得像 'W'
我使用 vim。在我曾经使用过的每台机器上，“w”都尊重标点符号。如果我按“w”，我会前进到一个词的结尾。如果是句点分隔词，我将移至下一个句点。然而，在特定的 vim 安装中，'w' 被解释为 '
正则表达式差异 : (\w+)? 和 (\w*)
(\w+)?有什么区别吗和 (\w*)在正则表达式中？似乎是一样的，不是吗？最佳答案 (\w+)?和 (\w*)两者匹配相同(0..+inf 单词字符) 但是，有一点不同: 在第一种情况下，如果正
ruby %w(...) 与 %w[...]
在 Ruby 中 %w(don matt james) 和 %w[don matt james] 有区别吗？使用 Ruby 控制台，它们都输出一个数组，每个单词作为一个元素。我很好奇为什么有多种方法
context-free-grammar - 是 { w | w <> w^R } 在字母表 {0,1} 上是一种上下文无关的语言？
我真的很想帮助您决定字母表中所有单词的语言是否{0,1}不能从两边以同样的方式读取，{ w | w <> wR } , 是一种上下文无关语言(即可以转化为特定的语法规则)。我试图通过抽水引理证明它不
xml - 如何使用 xslt 2.0 检查所有具有我当前节点的 w:r/w:t 子节点的后代::w:p？
这是我的 Xml 文档(小片段)。
vim - vim中有没有办法制作:W to do the same thing as :w?
:q 和 :Q 也是如此。我几乎总是不会足够快地放弃转变，看到 :Q 和 :W 无论如何都没有被使用，我认为让它们像小写字母一样做会很好。最佳答案黑客是通过 :cmap或 :cabb ，但这些都有
javascript - 正则表达式 -/\w\b\w/
我对/\w\b\w/感到困惑。我认为它应该匹配“we we”中的“e w”，因为: \w 是单词字符，即“e” \b 是单词 broundary，它是 ""(空格) \w 是另一个词是“w” 所以匹配
linux - 这两个命令之间的区别(w & w/out "")以及为什么？
在 Linux 中，我的目录中有一个名为 test2 的文件，该文件是我使用 touch 命令创建的。当我运行命令时 find . –name “*test*” -ls 它不会给我错误，但是当我运行
ruby - 尝试使用匹配器/\w/and/\W/将句子拆分为单词和分隔符
我想把一个句子分成单词和单词之间的部分(我称之为定界符)。 sentence = "First-tea,-then-coffee!" => "First-tea,-then-coffee!" word
ruby - %w 和 %W 有什么区别
我正在查看 Ruby 的文档。我对使用 %w() 还是 %W() 感到困惑(后面的 W 是大写的)。两者有什么区别？你能给我指点一些文档吗？最佳答案当大写时，数组由插入的字符串构成，就像在双引号字
ruby 数组 : %w vs %W
有什么区别？最佳答案 %w 引用像单引号 ''(没有变量插值，转义序列更少)，而 %W 引用像双引号 ""。 irb(main):001:0> foo="hello" => "hello" irb(
xml - 我想替换 element with a new xml element in a Open XML document using XQuery
这是运行 XQueries 之前的 XML 文档示例: ... 1.7 ****
c++ - clang vs gcc 运行时差异 : c++ class template built w clang crashes w/o copy constructor, 内置 w gcc 使用复制构造函数崩溃
除非我为 TableTypeCarrier 模板类包含一个复制构造函数，否则使用 clang(但不是 gcc)构建时，以下代码会在运行时崩溃吗？如果我包含该复制构造函数，为什么我在使用 gcc 构建时
regex - 为什么正则表达式/[\w\W] + x/i运行起来会非常慢？
尝试: time perl -E '$x="a" x 100000; $x =~ /[\w\W]+x/i' 将运行很长时间(在我的笔记本上20秒)。没有/i，例如 time perl -E '$x=

首页

博学

6Ren·AI

商城

javascript - 尝试使用 w3.js 对表进行排序，但它没有正确对数字进行排序