Question

我有以下代码，我用它来对html表上的列进行排序。它可以按字母顺序排序。当数字是单个数字时，它也可用于排序。

当我尝试对包含货币的列进行排序时，排序功能不会按正确的顺序对数字进行排序。

我需要更改哪些内容才能正确排序货币列？

＆＃13;

function sortTable(n) {
  var table, rows, switching, i, x, y, shouldSwitch, dir, switchcount = 0;
  table = document.getElementById("CarTable");
  switching = true;

  dir = "asc";

  while (switching) {

    switching = false;
    rows = table.getElementsByTagName("TR");

    for (i = 1; i < (rows.length - 1); i++) {

      shouldSwitch = false;

      x = rows[i].getElementsByTagName("TD")[n];
      y = rows[i + 1].getElementsByTagName("TD")[n];

      if (dir == "asc") {
        if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) {

          shouldSwitch= true;
          break;
        }
      } else if (dir == "desc") {
        if (x.innerHTML.toLowerCase() < y.innerHTML.toLowerCase()) {

          shouldSwitch= true;
          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;
      }
    }
  }
}

＆＃13;

table {
    border-spacing: 0;
    width: 100%;
    border: 1px solid #ddd;
}

th {
    cursor: pointer;
}

th, td {
    text-align: left;
    padding: 16px;
}

tr:nth-child(even) {
    background-color: #f2f2f2
}

＆＃13;

<html>
<head>

</head>
<body>


<table id="CarTable">
  <tr>

    <th onclick="sortTable(0)">Name</th>
    <th onclick="sortTable(1)">Amount1</th>
  </tr>
  <tr>
    <td>Mustang</td>
    <td>$2,000.00</td>
  </tr>
  <tr>
    <td>Charger</td>
    <td>$300.00</td>
  </tr>
  <tr>
    <td>Corvette</td>
    <td>$225.00</td>
  </tr>
  <tr>
    <td>Firebird</td>
    <td>$2,600.00</td>
  </tr>
  <tr>
    <td>GTO</td>
    <td>$260.00</td>
  </tr>
  <tr>
    <td>Camaro</td>
    <td>$1,000.22</td>
  </tr>
  <tr>
    <td>Barracuda</td>
    <td>$52.00</td>
  </tr>
  <tr>
    <td>Impala</td>
    <td>$25.00</td>
  </tr>
</table>



</body>
</html>

＆＃13;

Answer 1

我添加了下一个if to extraxt值取决于列

   if (n == 0) {
        xText = x.innerHTML.toLowerCase();
        yText = y.innerHTML.toLowerCase();
      } else {
        xText = parseFloat(x.innerHTML.split('$')[1].replace(/,/g, ''));
        yText = parseFloat(y.innerHTML.split('$')[1].replace(/,/g, ''));
      }

我还将[{1}}和x.innerHTML.toLowerCase()替换为y.innerHTML.toLowerCase()和xText，以便根据列轻松更改值

使用yText完成提取浮点值并删除$符号和逗号

希望这就是你要找的东西：）

＆＃13;

parseFloat(y.innerHTML.split('$')[1].replace(/,/g, ''));

＆＃13;

function sortTable(n) {
  var table, rows, switching, i, x, y, shouldSwitch, dir, switchcount = 0;
  table = document.getElementById("CarTable");
  switching = true;

  dir = "asc";

  while (switching) {

    switching = false;
    rows = table.getElementsByTagName("TR");

    for (i = 1; i < (rows.length - 1); i++) {

      shouldSwitch = false;

      x = rows[i].getElementsByTagName("TD")[n];
      y = rows[i + 1].getElementsByTagName("TD")[n];


      if (n == 0) {
        xText = x.innerHTML.toLowerCase();
        yText = y.innerHTML.toLowerCase();
      } else {
        xText = parseFloat(x.innerHTML.split('$')[1].replace(/,/g, ''));
        yText = parseFloat(y.innerHTML.split('$')[1].replace(/,/g, ''));
      }

      if (dir == "asc") {
        if (xText > yText) {
          shouldSwitch = true;
          break;
        }
      } else if (dir == "desc") {
        if (xText < yText) {
          shouldSwitch = true;
          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;
      }
    }
  }
}

＆＃13;

table {
  border-spacing: 0;
  width: 100%;
  border: 1px solid #ddd;
}

th {
  cursor: pointer;
}

th,
td {
  text-align: left;
  padding: 16px;
}

tr:nth-child(even) {
  background-color: #f2f2f2
}

＆＃13;

Answer 2

您需要做的就是替换比较逻辑。我冒昧地使用接受mode参数的函数在代码中更改此部分。你可以轻松扩展它。

function sortTable(n,mode) {
  var table, rows, switching, i, x, y, shouldSwitch, dir, switchcount = 0;
  table = document.getElementById("CarTable");
  switching = true;

  dir = "asc";

  while (switching) {

    switching = false;
    rows = table.getElementsByTagName("TR");

    for (i = 1; i < (rows.length - 1); i++) {

      shouldSwitch = false;

      x = rows[i].getElementsByTagName("TD")[n];
      y = rows[i + 1].getElementsByTagName("TD")[n];

      if (dir == "asc") {
        if (compareValues(x.innerHTML,y.innerHTML,mode)==1) {

          shouldSwitch= true;
          break;
        }
      } else if (dir == "desc") {
        if (compareValues(x.innerHTML,y.innerHTML,mode)==-1) {

          shouldSwitch= true;
          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;
      }
    }
  }
}

function compareValues(x,y,mode){
  x = parseValue(x,mode)
  y = parseValue(y,mode)
  if(x<y)
    return -1
  if(x>y)
    return 1
  return 0
}

function parseValue(val,mode){
  switch(mode){
    case 'alphabet':
      return val.toLowerCase()
    break
    case 'currency':
      return parseFloat(val.slice(1).replace(',',''))
    return
  }
}

table {
    border-spacing: 0;
    width: 100%;
    border: 1px solid #ddd;
}

th {
    cursor: pointer;
}

th, td {
    text-align: left;
    padding: 16px;
}

tr:nth-child(even) {
    background-color: #f2f2f2
}

<html>
<head>

</head>
<body>


<table id="CarTable">
  <tr>

    <th onclick="sortTable(0,'alphabet')">Name</th>
    <th onclick="sortTable(1,'currency')">Amount1</th>
  </tr>
  <tr>
    <td>Mustang</td>
    <td>$2,000.00</td>
  </tr>
  <tr>
    <td>Charger</td>
    <td>$300.00</td>
  </tr>
  <tr>
    <td>Corvette</td>
    <td>$225.00</td>
  </tr>
  <tr>
    <td>Firebird</td>
    <td>$2,600.00</td>
  </tr>
  <tr>
    <td>GTO</td>
    <td>$260.00</td>
  </tr>
  <tr>
    <td>Camaro</td>
    <td>$1,000.22</td>
  </tr>
  <tr>
    <td>Barracuda</td>
    <td>$52.00</td>
  </tr>
  <tr>
    <td>Impala</td>
    <td>$25.00</td>
  </tr>
</table>



</body>
</html>

html表上的货币的javascript列排序

2 个答案: