使用不同列值中的特殊字符对数字进行排序

时间：2018-02-14 09:27:14

标签： javascript html jquery-plugins

我有一个HTML表，有八列，其值以逗号，小数点等分隔。有些是百分比值和小时值。如何在第一次点击时按降序排序值，在第二次点按升序排序单击相应的列标题时单击。

我尝试排序的代码如下所示：

＆＃13;
＆＃13; 
function getVal(elm, n) {
      var v = $(elm).find('td').eq(n).text().toUpperCase();
      var num = v.split(/ /)[0].replace(/[^\d]/g, '')
      num = parseFloat(num);
      if ($.isNumeric(num)) {
        v = parseInt(num, 10);
      }
      return v;
    }

    var f = 1;
    $(".table-sortable .column-head").find('span').click(function(event) {
      event.preventDefault();
      table = $(this).closest('table');
      th = $(this).parent();
      $(th).find('span').toggleClass('rotate');

      f *= -1;
      var n = th.prevAll().length;
      console.log(n);
      var rows = table.find('tbody  tr').get();
      rows.sort(function(a, b) {
        var A = getVal(a, n);
        var B = getVal(b, n);
        if (A < B) {
          return -1 * f;
        }
        if (A > B) {
          return 1 * f;
        }
        return 0;
      });
      $.each(rows, function(index, row) {
        table.children('tbody').append(row);
      });
    });
＆＃13;
＆＃13;
＆＃13;

HTML表：

＆＃13;
＆＃13; 
<table class="table-sortable" id="myTable">
   <thead>
      <tr>
         <th scope="col" class="column-head"><span>abc1</span></th>
         <th scope="col" class="column-head"><span>abc2</span></th>
         <th scope="col" class="column-head"><span>abc3</span></th>
         <th scope="col" class="column-head"><span>abc4</span></th>
         <th scope="col" class="column-head"><span>abc5</span></th>
         <th scope="col" class="column-head"><span>abc6</span></th>
         <th scope="col" class="column-head"><span>abc7</span></th>
         <th scope="col" class="column-head"><span>abc8</span></th>
      </tr>
   </thead>
   <tbody class="table-body">
      <tr class="table-row">
         <td scope="row" class="column-fixed">BU001</td>
         <td class="column-values">18.240.00h</td>
         <td class="column-values">200h</td>
         <td class="column-values">46,13%</td>
         <td class="column-values">12.600.00€</td>
         <td class="column-values">77,00%</td>
         <td class="column-values">43.10%</td>
         <td class="column-values-end">2.82%</td>
      </tr>
      <tr class="table-row">
        <td scope="row" class="column-fixed">AU003</td>
        <td class="column-values">21.240.00h</td>
        <td class="column-values">120h</td>
        <td class="column-values">1,13%</td>
        <td class="column-values">4.600.00€</td>
        <td class="column-values">12,00%</td>
        <td class="column-values">66.10%</td>
        <td class="column-values-end">1.82%</td>
      </tr>
     <tr class="table-row">
         <td class="column-fixed">AU309</td>
         <td class="column-values">2.240.00h</td>
         <td class="column-values">200h</td>
         <td class="column-values">26,13%</td>
         <td class="column-values">59.600.00€</td>
         <td class="column-values">3,00%</td>
         <td class="column-values">40.10%</td>
         <td class="column-values-end">12.82%</td>
      </tr>
      <tr class="table-row">
         <td class="column-fixed">DT907</td>
         <td class="column-values">12.240.00h</td>
         <td class="column-values">100h</td>
         <td class="column-values">6,13%</td>
         <td class="column-values">49.600.00€</td>
         <td class="column-values">90,00%</td>
         <td class="column-values">4.10%</td>
         <td class="column-values-end">2.82%</td>
      </tr>
   </tbody>
</table>
＆＃13;
＆＃13;
＆＃13;

1 个答案:

答案 0 :(得分：0)

不要忘记jquery！

function getVal(elm, n) {
      var v = $(elm).find('td').eq(n).text().toUpperCase();
      //var num=(n!==0)? v.split(/ /)[0].replace(/[^\d]/g, ''):v;
      var num = v.match(/^\d/)?v.split(/ /)[0].replace(/[^\d]/g, ''):v;
      
      num = parseFloat(num);
      if ($.isNumeric(num)) {
        v = parseInt(num, 10);
      }
      return v;
    }

    var f = 1;
    $(".table-sortable .column-head").find('span').click(function(event) {
      event.preventDefault();
      table = $(this).closest('table');
      th = $(this).parent();
      $(th).find('span').toggleClass('rotate');

      f *= -1;
      var n = th.prevAll().length;
      console.log(n);
      var rows = table.find('tbody  tr').get();
      rows.sort(function(a, b) {
        var A = getVal(a, n);
        var B = getVal(b, n);
        if (A < B) {
          return -1 * f;
        }
        if (A > B) {
          return 1 * f;
        }
        return 0;
      });
      $.each(rows, function(index, row) {
        table.children('tbody').append(row);
      });
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table-sortable" id="myTable">
   <thead>
      <tr>
         <th scope="col" class="column-head"><span>abc1</span></th>
         <th scope="col" class="column-head"><span>abc2</span></th>
         <th scope="col" class="column-head"><span>abc3</span></th>
         <th scope="col" class="column-head"><span>abc4</span></th>
         <th scope="col" class="column-head"><span>abc5</span></th>
         <th scope="col" class="column-head"><span>abc6</span></th>
         <th scope="col" class="column-head"><span>abc7</span></th>
         <th scope="col" class="column-head"><span>abc8</span></th>
      </tr>
   </thead>
   <tbody class="table-body">
      <tr class="table-row">
         <td scope="row" class="column-fixed">AU201</td>
         <td class="column-values">18.240.00h</td>
         <td class="column-values">200h</td>
         <td class="column-values">46,13%</td>
         <td class="column-values">12.600.00€</td>
         <td class="column-values">77,00%</td>
         <td class="column-values">43.10%</td>
         <td class="column-values-end">2.82%</td>
      </tr>
      <tr class="table-row">
        <td scope="row" class="column-fixed">BU004</td>
        <td class="column-values">21.240.00h</td>
        <td class="column-values">120h</td>
        <td class="column-values">1,13%</td>
        <td class="column-values">4.600.00€</td>
        <td class="column-values">12,00%</td>
        <td class="column-values">66.10%</td>
        <td class="column-values-end">1.82%</td>
      </tr>
     <tr class="table-row">
         <td class="column-fixed">AZ455</td>
         <td class="column-values">2.240.00h</td>
         <td class="column-values">200h</td>
         <td class="column-values">26,13%</td>
         <td class="column-values">59.600.00€</td>
         <td class="column-values">3,00%</td>
         <td class="column-values">40.10%</td>
         <td class="column-values-end">12.82%</td>
      </tr>
      <tr class="table-row">
         <td class="column-fixed">FE45</td>
         <td class="column-values">12.240.00h</td>
         <td class="column-values">100h</td>
         <td class="column-values">6,13%</td>
         <td class="column-values">49.600.00€</td>
         <td class="column-values">90,00%</td>
         <td class="column-values">4.10%</td>
         <td class="column-values-end">2.82%</td>
      </tr>
   </tbody>
</table>

相关问题
最新问题