javascript - 使用 JavaScript 对表值进行升序和降序排序

Question

我有下表，尝试使用以下 JavaScript 代码按升序和降序排序onclick:

function sortTable(n) {
  var table, rows, switching, i, x, y, shouldSwitch, dir, switchcount = 0;
  table = document.getElementById("myTable");
  switching = true;
  //Set the sorting direction to ascending:
  dir = "asc";
  /*Make a loop that will continue until
  no switching has been done:*/
  while (switching) {
    //start by saying: no switching is done:
    switching = false;
    rows = table.getElementsByTagName("TR");
    /*Loop through all table rows (except the
    first, which contains table headers):*/
    for (i = 1; i < (rows.length - 1); i++) {
      //start by saying there should be no switching:
      shouldSwitch = false;
      /*Get the two elements you want to compare,
      one from current row and one from the next:*/
      x = rows[i].getElementsByTagName("TD")[n];
      y = rows[i + 1].getElementsByTagName("TD")[n];
      /*check if the two rows should switch place,
      based on the direction, asc or desc:*/
      if (dir == "asc") {
        if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) {
          //if so, mark as a switch and break the loop:
          shouldSwitch = true;
          break;
        }
      } else if (dir == "desc") {
        if (x.innerHTML.toLowerCase() < y.innerHTML.toLowerCase()) {
          //if so, mark as a switch and break the loop:
          shouldSwitch = true;
          break;
        }
      }
    }
    if (shouldSwitch) {
      /*If a switch has been marked, make the switch
      and mark that a switch has been done:*/
      rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
      switching = true;
      //Each time a switch is done, increase this count by 1:
      switchcount++;
    } else {
      /*If no switching has been done AND the direction is "asc",
      set the direction to "desc" and run the while loop again.*/
      if (switchcount == 0 && dir == "asc") {
        dir = "desc";
        switching = true;
      }
    }
  }
}

<div class="table-responsive">
  <table class="table table-striped" id="myTable">
    <tr>
      <th onclick="sortTable(0)">Date <i class='fa fa-caret-down'></i></th>
      <th onclick="sortTable(1)">Views <i class='fa fa-caret-down'></i></th>
      <th onclick="sortTable(2)">Clicks <i class='fa fa-caret-down'></i></th>
      <th onclick="sortTable(3)">CTR <i class='fa fa-caret-down'></i></th>
      <th onclick="sortTable(4)">Earned <i class='fa fa-caret-down'></i></th>
      <th onclick="sortTable(5)">eCPM <i class='fa fa-caret-down'></i></th>
    </tr>
    <tr>
      <td>2017-11-30</td>
      <td>4133</td>
      <td>3</td>
      <td>0.07%</td>
      <td>$0.03</td>
      <td>$0.0073</td>
    </tr>
    <tr>
      <td>2017-11-29</td>
      <td>8340</td>
      <td>5</td>
      <td>0.06%</td>
      <td>$0.05</td>
      <td>$0.006</td>
    </tr>
    <tr>
      <td>2017-11-28</td>
      <td>7410</td>
      <td>5</td>
      <td>0.07%</td>
      <td>$0.025</td>
      <td>$0.0034</td>
    </tr>
    <tr>
      <td>2017-11-27</td>
      <td>3796</td>
      <td>2</td>
      <td>0.05%</td>
      <td>$0.01</td>
      <td>$0.0026</td>
    </tr>
    <tr>
      <td>2017-11-26</td>
      <td>4005</td>
      <td>2</td>
      <td>0.05%</td>
      <td>$0.01</td>
      <td>$0.0025</td>
    </tr>
    <tr>
      <td>2017-11-25</td>
      <td>2070</td>
      <td>2</td>
      <td>0.1%</td>
      <td>$0.01</td>
      <td>$0.0048</td>
    </tr>
    <tr>
      <td>2017-11-24</td>
      <td>1016</td>
      <td>6</td>
      <td>0.59%</td>
      <td>$0.03</td>
      <td>$0.0295</td>
    </tr>
    <tr>
      <td>2017-11-23</td>
      <td>1503</td>
      <td>4</td>
      <td>0.27%</td>
      <td>$0.02</td>
      <td>$0.0133</td>
    </tr>
    <tr>
      <td>2017-11-22</td>
      <td>1665</td>
      <td>11</td>
      <td>0.66%</td>
      <td>$0.055</td>
      <td>$0.033</td>
    </tr>
    <tr>
      <td>2017-11-21</td>
      <td>1340</td>
      <td>10</td>
      <td>0.75%</td>
      <td>$0.05</td>
      <td>$0.0373</td>
    </tr>
    <tr>
      <td>2017-11-20</td>
      <td>1489</td>
      <td>13</td>
      <td>0.87%</td>
      <td>$0.065</td>
      <td>$0.0437</td>
    </tr>
    <tr>
      <td>2017-11-19</td>
      <td>1745</td>
      <td>5</td>
      <td>0.29%</td>
      <td>$0.025</td>
      <td>$0.0143</td>
    </tr>
    <tr>
      <td>2017-11-18</td>
      <td>962</td>
      <td>5</td>
      <td>0.52%</td>
      <td>$0.025</td>
      <td>$0.026</td>
    </tr>
    <tr>
      <td>2017-11-17</td>
      <td>779</td>
      <td>8</td>
      <td>1.03%</td>
      <td>$0.04</td>
      <td>$0.0513</td>
    </tr>
  </table>
</div>

这里的问题是它可以在相同位数的情况下正常工作，但在不同位数的情况下却无法正常工作。例如，如果列包含:1, 5, 3

它按预期排序。 1, 3, 5 & 5, 3, 1

但是如果该列包含:5, 3, 11

排序为:11, 3, 5 & 5, 3, 11

如何正确排序它们？

Answer 1

由于您有多种不同的格式，因此您可能想要做的是尝试提取数字的数字部分。

您可以尝试使用 RegExp 来执行此操作，检查常见的数字模式，然后解析为简单的数字。如果我正在设计这个，我可能会为每种支持的格式提供一系列不同的匹配和转换函数。

类似这样的:

const patterns = [
      { test: /\$[0-9\.,]+/, transform: str => parseFloat(str.replace(/[$,]/g, '')) },
      { test: /[0-9\.,]+%/, transform: str => parseFloat(str.replace(/[%,]/g, '')) }
    ];
    
const convert = str => {
  const pattern = patterns.find(({ test }) => test.test(str));
  
  return pattern && pattern.transform(str) || str;
};

const converted = ['$1,234.56', '1,234.56%', 'not a num'].map(str => convert(str));
console.log(converted);

然后，对于每个字段，运行所有模式，直到找到匹配项，转换它们，然后进行数字排序。您还可以将那些未转换为字符串的内容保留下来，并让它对它们进行类似字符串的排序。

在您的代码中，如果您使用像我这样的东西，您只需将比较行更改为如下所示:

if (convert(x.innerHTML.toLowerCase()) > convert(y.innerHTML.toLowerCase()))

另外，关于日期的提示:我建议将日期转换为时间戳或通用格式(例如 YYYY-MM-DD HH:MM:SS，从最大到最小)，然后，您可以在单列中正确比较和排序多种日期格式。

<小时/>

以下是原始答案，未考虑带有数字的符号。

您的问题是您正在进行字符串比较而不是数字比较。

字符串比较将对字符串数字进行排序，就像对字母表进行排序一样。例如，以 1 开头的任何内容都始终位于以 2 开头的任何内容之前，即使它是“1365872685623876723”对“2”。

相反，更改这些行:

x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()

首先使用 parseInt() 将它们解析为数字:

parseInt(x.innerHTML.toLowerCase()) > parseInt(y.innerHTML.toLowerCase())

这将使其进行数字排序。