首页 > 解决方案 > 如何在javascript中对带有负数的表格进行排序

问题描述

我使用此代码对各种类型的数据(日期、数字、字符串等)进行排序。

它在大多数情况下都有效,但是当我尝试对包含负数的数字的列进行排序时,它无法正确排序。

假设我喜欢按降序对第 3 列进行排序。现在它排序为 0 并且负数被忽略。

 function sortcolumn(value) {
 // alert(value)
  
 let table, rows, switching, i, x, y, shouldSwitch, dir, switchcount = 0;
    table = document.getElementById("ControlPanelListOfPAGAVEISPendentesTable");
  switching = true;

  dir = "desc";

  while (switching) {
    switching = false;
    rows = table.rows;
    for (i = 1; i < (rows.length - 1); i++) {
      shouldSwitch = false;
      x = rows[i].cells[value].textContent.trim().toLowerCase();
      y = rows[i + 1].cells[value].textContent.trim().toLowerCase();
      const num = /^\d/.test(x)
      const date = num && x.indexOf("/") != -1;
      if (date) {
        let [dd, mm, yyyy] = x.split("/");
        x = new Date(yyyy, mm - 1, dd, 15, 0, 0, 0).getTime();
        [dd, mm, yyyy] = y.split("/");
        y = new Date(yyyy, mm - 1, dd, 15, 0, 0, 0).getTime();
      }
      else if (num) {
         x = +x.replace(",", ".") 
         y = +y.replace(",", ".");
      }
      if (dir == "asc") {
          shouldSwitch = x > y
      } else if (dir == "desc") {
          shouldSwitch = x < y
      }
      if (shouldSwitch) break;
    }
    if (shouldSwitch) {
      rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
      switching = true;
      switchcount++;
    } else {
      if (switchcount == 0 && dir == "asc") {
        dir = "desc";
        switching = true;
      }
    }
  }

}
table {
  border-spacing: 0;
  width: 100%;
  border: 1px solid #ddd;
}

th, td {
  text-align: left;
  padding: 1px;
}

tr:nth-child(even) {
  background-color: #f2f2f2
}
<!DOCTYPE html>
<html>
<head>
<title>Sort a HTML Table by the numeric third column</title>

</head>
<body>

<p>Click the button to sort the table alphabetically, by name:</p>
<p><button onclick="sortControlPanelListOfPAGAVEISPendentesTableList()">Sort</button></p>

<table id="ControlPanelListOfPAGAVEISPendentesTable">
  <tr>
    <th onclick="sortcolumn(0)">Name</th>
    <th onclick="sortcolumn(1)">Country</th>
    <th onclick="sortcolumn(2)">QTY</th>
  </tr>
  <tr>
    <td>Berglunds snabbkop</td>
    <td>Sweden</td>
    <th>-55</th>
  </tr>
  <tr>
    <td>North/South</td>
    <td>UK</td>
     <th>1</th>
  </tr>
  <tr>
    <td>Alfreds Futterkiste</td>
    <td>Germany</td>
     <th>10</th>
  </tr>
  <tr>
    <td>Koniglich Essen</td>
    <td>Germany</td>
     <th>-20</th>
  </tr>
    <tr>
    <td>other</td>
    <td>other</td>
     <th>-60</th>
  </tr>
  <tr>
    <td>Magazzini Alimentari Riuniti</td>
    <td>Italy</td>
    <th>6</th>
  </tr>
  <tr>
    <td>Paris specialites</td>
    <td>France</td>
   <th>-6</th>
  </tr>

  <tr>
    <td>Island Trading</td>
    <td>UK</td>
     <th>26</th>
  </tr>
      <tr>
    <td>Brasil</td>
    <td>Brasil</td>
   <th>-6</th>
  </tr>
  <tr>
    <td>Laughing Bacchus Winecellars</td>
    <td>Canada</td>
     <th>3</th>
  </tr>
</table>


</body>
</html>

标签: javascripthtml

解决方案


num = /^\d/.test(x)返回false负数字符串,因为“-”不是数字...


推荐阅读