【问题标题】:Array order in sorted table排序表中的数组顺序
【发布时间】:2019-08-21 11:37:27
【问题描述】:

我想创建一个脚本,根据您使用鼠标单击的列标题对 HTML 表进行排序。我正在尝试实施此处给出的答案:

https://stackoverflow.com/a/14267838/330663

我做了一些小修改,所以现在排序函数如下所示:

var COLUMNS_NUMBER = 4;

var myArrayColumns = [3,2,1,0];

function sortDataTable(arrayColumns, asc)
{
    for (var i = 0, n = COLUMNS_NUMBER; i < n; i++)
    {
//      var thisColumn = arrayColumns[i];
        var thisColumn = arrayColumns.reverse()[i];
        DATA_TABLE = DATA_TABLE.sort(function(a,b)
        {
            if (asc)
            {
                return (a[thisColumn].toLowerCase() > b[thisColumn].toLowerCase()) ? 1 : -1;
            }
            else
            {
                return (a[thisColumn].toLowerCase() < b[thisColumn].toLowerCase()) ? 1 : -1;
            }
        });
    }
}

我这样调用函数:

sortDataTable(myArrayColumns, true);

其中 3、2、1、0 是数据中的列号。

但它似乎总是根据第 0 列排序,即使我颠倒了myArrayColumns 的顺序。为什么会这样?

这是一些示例数据:

var DATA_TABLE =
[
    ["ASCII/Unicode/HTML Codes","Reference","091","PC: <span style=\"font-size:smaller;\"><a target=\"_blank\" href=\"./keyboard-diagram-ascii-unicode-html-codes.php?sty=15&lay=1&fmt=0\">US 104 Key (ANSI)</a></span><br/>"],
    ["ActionScript 3.0 Key Codes","Reference","092","PC: <span style=\"font-size:smaller;\"><a target=\"_blank\" href=\"./keyboard-diagram-actionscript-3-0-key-codes.php?sty=15&lay=1&fmt=0\">US 104 Key (ANSI)</a></span><br/>"],
    ["Age of Decadence, The","Roleplaying","156","PC: <span style=\"font-size:smaller;\"><a target=\"_blank\" href=\"./keyboard-diagram-age-of-decadence-the.php?sty=15&lay=1&fmt=0\">US 104 Key (ANSI)</a></span><br/>"],
    ["Aliens versus Predator","Action","002","PC: <span style=\"font-size:smaller;\"><a target=\"_blank\" href=\"./keyboard-diagram-aliens-versus-predator.php?sty=15&lay=1&fmt=0\">US 104 Key (ANSI)</a></span><br/>"],
    ["Allegiance","Simulation","014","PC: <span style=\"font-size:smaller;\"><a target=\"_blank\" href=\"./keyboard-diagram-allegiance.php?sty=15&lay=1&fmt=0\">US 104 Key (ANSI)</a></span><br/>"],
    ["American McGee's Alice","Action","003","PC: <span style=\"font-size:smaller;\"><a target=\"_blank\" href=\"./keyboard-diagram-american-mcgees-alice.php?sty=15&lay=1&fmt=0\">US 104 Key (ANSI)</a></span><br/>"],
    ["Anachronox","Roleplaying","140","PC: <span style=\"font-size:smaller;\"><a target=\"_blank\" href=\"./keyboard-diagram-anachronox.php?sty=15&lay=1&fmt=0\">US 104 Key (ANSI)</a></span><br/>"],
    ["Apple Virtual Key Codes","Reference","090","Mac: <span style=\"font-size:smaller;\"><a target=\"_blank\" href=\"./keyboard-diagram-apple-virtual-key-codes.php?sty=15&lay=5&fmt=0\">US 109 Key (A1048)</a>, <a target=\"_blank\" href=\"./keyboard-diagram-apple-virtual-key-codes.php?sty=15&lay=6&fmt=0\">US 109 Key (A1243)</a>, <a target=\"_blank\" href=\"./keyboard-diagram-apple-virtual-key-codes.php?sty=15&lay=7&fmt=0\">UK 110 Key (A1048)</a></span><br/>"],
    ["Blank Starter","Reference","184","PC: <span style=\"font-size:smaller;\"><a target=\"_blank\" href=\"./keyboard-diagram-blank-starter.php?sty=15&lay=1&fmt=0\">US 104 Key (ANSI)</a>, <a target=\"_blank\" href=\"./keyboard-diagram-blank-starter.php?sty=15&lay=3&fmt=0\">DE 105 Key (ISO)</a>, <a target=\"_blank\" href=\"./keyboard-diagram-blank-starter.php?sty=15&lay=4&fmt=0\">FR 105 Key (ISO)</a>, <a target=\"_blank\" href=\"./keyboard-diagram-blank-starter.php?sty=15&lay=8&fmt=0\">UK 105 Key (ISO)</a>, <a target=\"_blank\" href=\"./keyboard-diagram-blank-starter.php?sty=15&lay=9&fmt=0\">ES 105 Key (ISO)</a>, <a target=\"_blank\" href=\"./keyboard-diagram-blank-starter.php?sty=15&lay=10&fmt=0\">US 104 Key (Dvorak)</a></span><br/>Mac: <span style=\"font-size:smaller;\"><a target=\"_blank\" href=\"./keyboard-diagram-blank-starter.php?sty=15&lay=5&fmt=0\">US 109 Key (A1048)</a>, <a target=\"_blank\" href=\"./keyboard-diagram-blank-starter.php?sty=15&lay=6&fmt=0\">US 109 Key (A1243)</a>, <a target=\"_blank\" href=\"./keyboard-diagram-blank-starter.php?sty=15&lay=7&fmt=0\">UK 110 Key (A1048)</a></span><br/>"]
]

谢谢。

【问题讨论】:

  • 等我添加一些示例数据。对不起。
  • 好的,我添加了一些示例数据。
  • 似乎排序功能适用于所有列,除了第 3 列在任何情况下都不能正确排序。浏览器遇到混合文本/HTML 数据时的行为如何?
  • 这个问题实际上与解析/剥离 HTML 标签有关,在这里回答:stackoverflow.com/questions/822452/…
  • 我投票结束这个问题,因为这个问题最终与数组和表格排序无关。

标签: javascript html arrays


【解决方案1】:

这可能是一个更容易的想法。

var myArrayColumns = [3, 2, 1, 0];

function sortDataTable(arrayColumns, asc) {
  if (asc) {
    return arrayColumns.sort();
  } else {
    return arrayColumns.sort().reverse();
  }
}

console.log(sortDataTable(myArrayColumns))

【讨论】:

  • 那些出色的周六勇士...media1.giphy.com/media/GQnsaAWZ8ty00/giphy.gif
  • 不,我要排序的表称为DATA_TABLE
  • @posfan12 我们现在看到了,但您应该在提交之前先考虑一下您的原始帖子。因此,我们不必遵循您的所有编辑,猜测您可能需要什么。
猜你喜欢
  • 2019-07-03
  • 1970-01-01
  • 2014-04-30
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多