Question

我有一个表，我想根据selectbox（下拉列表id="bil"）的输入，按日期的升序或降序对表进行排序。

var itemsAscend = [];
var itemsDescend = [];
$('#bil').on('change', function() {
  var itemsAscend1 = [];
  itemsAscend = itemsAscend1;
  var itemsDescend1 = [];
  itemsDescend = itemsDescend1;
  $('#tabbody tr td:nth-child(2)').each(function() {
    //add item to array
    itemsAscend.push($(this).text());
    itemsDescend.push($(this).text());
  });

  itemsAscend.sort((d1, d2) => new Date(d1) - new Date(d2) > 0);
  itemsDescend.sort((d1, d2) => new Date(d1) - new Date(d2) < 0);
 
  
  var selectedValue = this.value;
  $('#tabbody tr').hide();

  // var selects = itemsAscend;
  // var selects1 = itemsDescend;
  // console.log(selects)
  // console.log(itemsAscend.reverse())
  if (selectedValue === "Ascend") {
    for (var i = 0; i < itemsAscend.length; i++) {
      $(itemsAscend[i]).parents('tr').show();
    }
  } else if (selectedValue === "Descend") {
    for (var i = 0; i < itemsDescend.length; i++) {
      $(itemsDescend[i]).parents('tr').show();
    }
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>

<body>
  <div>
    <select class="form-control" id="bil" style="">
      <option value=""></option>
      <option value="Ascend">Ascend</option>
      <option value="Descend" selected="">Descend</option>
    </select>
  </div>
  <table>
    <thead>
      <tr>
        <th>S.NO</th>
        <th>Date</th>
      </tr>
    </thead>
    <tbody id="tabbody">
      <tr>
        <td>1</td>
        <td>01-Oct-15</td>
      </tr>
      <tr>
        <td>2</td>
        <td>01-Jan-16</td>
      </tr>
      <tr>
        <td>3</td>
        <td>20-Jun-17</td>
      </tr>
      <tr>
        <td>4</td>
        <td>05-Dec-17</td>
      </tr>
    </tbody>
  </table>
</body>

</html>

我已尝试使用上述代码，但未获得所需的结果。

Answer 1

您可以使用Date对象来解析日期，但您还需要删除-，然后只需检查选择值并按该顺序排序。

$('select').change(function() {
	var order = $(this).val();
  
  var sorted = $('tbody tr').sort(function(a, b) {
    var a = new Date($(a).find('td:last-child').text().split('-').join(' '));
    var b = new Date($(b).find('td:last-child').text().split('-').join(' '));

    return order == 'desc' ?  b - a : a - b;
  })

  $('tbody').html(sorted)
  
  $("tr").each(function(i) {
    $(this).find('td:first-child').text(i)
  })
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <select class="form-control" id="bil" style="">
    <option value=""></option>
    <option value="asc">Ascend</option>
    <option value="desc" selected="">Descend</option>
  </select>
</div>

<table>
  <thead>
    <tr>
      <th>S.NO</th>
      <th>Date</th>
    </tr>
  </thead>
  <tbody id="tabbody">
    <tr>
      <td>1</td>
      <td>20-Jun-17</td>
    </tr>
    <tr>
      <td>2</td>
      <td>01-Oct-15</td>
    </tr>
    <tr>
      <td>3</td>
      <td>01-Jan-16</td>
    </tr>
    <tr>
      <td>4</td>
      <td>05-Dec-17</td>
    </tr>
  </tbody>
</table>

使用jQuery或JavaScript按升序或降序排序表

1 个答案: