按日期范围从和过滤表格列表

时间：2019-07-04 00:29:16

标签： javascript jquery date filter

我想用name和date过滤我的表列表：from和to字段，名称工作正常，但起始日期和结束日期不起作用正确。

这是我的代码：

$(function(){
  //name part
  $("#name").on("keyup", function() {
    var value = $(this).val().toLowerCase();
    $("#my-table").find('tr').filter(function() {
      $(this).toggle($(this).find('td').text().toLowerCase().indexOf(value) > -1)
    });
  });
  
  //from part
  $("#from").bind("keyup change", function() {
    var value = $(this).val().toLowerCase();
    $("#my-table").find('tr').filter(function() {
      $(this).toggle($(this).find('td').text().toLowerCase()<(value))
    });
    
    //case if date is empty, we display all the list
    if(value.length === 0) {
      $("#my-table").find('tr').show();
    }
  });
  
  //to part
  $("#to").bind("keyup change", function() {
    var value = $(this).val().toLowerCase();
    $("#my-table").find('tr').filter(function() {
      $(this).toggle($(this).find('td').text().toLowerCase()>(value))
    });
  });
});
.container input {
    width:25%;
    display:inline-block;
    margin-bottom:20px;
}

.list-group {
  border:1px solid #eaeaea;
  padding:20px;
}

.list-group td, th {
  border:1px solid #eaeaea;
  padding:5px 50px;
  text-align:center;
}
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  Date from : <input class="form-control" id="from" type="date">
  to : <input class="form-control" id="to" type="date">
  <input class="form-control" id="name" type="text" placeholder="Search by name...">
  <br>
  <table>
      <thead>
          <tr>
              <th>Date</th>
              <th>Name</th>
          </tr>
      </thead>
      <tbody id="my-table">
        <tr class="list-group">
            <td >2015-01-01</td>
            <td>John</td>
        </tr>
        <tr class="list-group">
            <td>2015-01-30</td>
            <td>notif</td>
        </tr>
        <tr class="list-group">
            <td>2016-03-10</td>
            <td>food</td>
        </tr>
        <tr class="list-group">
            <td>2014-09-10</td>
            <td>yop</td>
        </tr>
        <tr class="list-group">
            <td>2017-12-30</td>
            <td>wick</td>
        </tr>
      </tbody>
  </table>
</div>

2 个答案:

答案 0 :(得分：1)

您可以使用momentjs库来比较您的日期值。

moment($(this).find('td').text().toLowerCase(), 'YYYY/MM/DD')>(value)


$(function(){
  //name part
  $("#name").on("keyup", function() {
    var value = $(this).val().toLowerCase();
    $("#my-table").find('tr').filter(function() {
      $(this).toggle($(this).find('td').text().toLowerCase().indexOf(value) > -1)
    });
  });
  
  //from part
  $("#from").bind("keyup change", function() {
  
    var value = moment($(this).val().toLowerCase(), 'YYYY/MM/DD');
    $("#my-table").find('tr').filter(function() {
      $(this).toggle(moment($(this).find('td').text().toLowerCase(), 'YYYY/MM/DD')>(value))
    });
    
    //case if date is empty, we display all the list
    if(value.length === 0) {
      $("#my-table").find('tr').show();
    }
  });
  
  //to part
  $("#to").bind("keyup change", function() {
     var value = moment($(this).val().toLowerCase(), 'YYYY/MM/DD');
    $("#my-table").find('tr').filter(function() {
      $(this).toggle(moment($(this).find('td').text().toLowerCase(), 'YYYY/MM/DD')<(value))
    });
  });
});
.container input {
    width:25%;
    display:inline-block;
    margin-bottom:20px;
}

.list-group {
  border:1px solid #eaeaea;
  padding:20px;
}

.list-group td, th {
  border:1px solid #eaeaea;
  padding:5px 50px;
  text-align:center;
}
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js" integrity="sha256-4iQZ6BVL4qNKlQ27TExEhBN1HFPvAvAMbFavKKosSWQ=" crossorigin="anonymous"></script>
</head>
<body>

<div class="container">
  Date from : <input class="form-control" id="from" type="date">
  to : <input class="form-control" id="to" type="date">
  <input class="form-control" id="name" type="text" placeholder="Search by name...">
  <br>
  <table>
      <thead>
          <tr>
              <th>Date</th>
              <th>Name</th>
          </tr>
      </thead>
      <tbody id="my-table">
        <tr class="list-group">
            <td >2015-01-01</td>
            <td>John</td>
        </tr>
        <tr class="list-group">
            <td>2015-01-30</td>
            <td>notif</td>
        </tr>
        <tr class="list-group">
            <td>2016-03-10</td>
            <td>food</td>
        </tr>
        <tr class="list-group">
            <td>2014-09-10</td>
            <td>yop</td>
        </tr>
        <tr class="list-group">
            <td>2017-12-30</td>
            <td>wick</td>
        </tr>
      </tbody>
  </table>
</div>

答案 1 :(得分：1)

希望此代码可以正常工作。

$(function() {
  //name part
  $("#name").on("keyup", function() {
    var value = $(this).val().toLowerCase();
    $("#my-table").find('tr').filter(function() {
      $(this).toggle($(this).find('td').text().toLowerCase().indexOf(value) > -1)
    });
  });


  $("#from,#to").bind('keyup change', function() {

    var val1 = moment($('#from').val().toLowerCase(), 'YYYY/MM/DD');
    var val2 = moment($('#to').val().toLowerCase(), 'YYYY/MM/DD');

    $("#my-table").find('tr').filter(function() {
      $(this).toggle((moment($(this).find('td').text().toLowerCase(),
        'YYYY/MM/DD') >= (val1) || !val1["_isValid"]) && (moment($(this).find('td').text()
        .toLowerCase(),
        'YYYY/MM/DD') <= (val2) || !val2["_isValid"]))
    });
    //console.log(val1["_isValid"], val2["_isValid"]);
  })


});
<!DOCTYPE html>
<html lang="en">

<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js" integrity="sha256-4iQZ6BVL4qNKlQ27TExEhBN1HFPvAvAMbFavKKosSWQ=" crossorigin="anonymous"></script>
  <style>
    .container input {
      width: 25%;
      display: inline-block;
      margin-bottom: 20px;
    }
    
    .list-group {
      border: 1px solid #eaeaea;
      padding: 20px;
    }
    
    .list-group td,
    th {
      border: 1px solid #eaeaea;
      padding: 5px 50px;
      text-align: center;
    }
  </style>
</head>

<body>

  <div class="container">
    Date from : <input class="form-control" id="from" type="date"> to : <input class="form-control" id="to" type="date">
    <input class="form-control" id="name" type="text" placeholder="Search by name...">
    <br>
    <table>
      <thead>
        <tr>
          <th>Date</th>
          <th>Name</th>
        </tr>
      </thead>
      <tbody id="my-table">
        <tr class="list-group">
          <td>2019-07-08</td>
          <td>John</td>
        </tr>
        <tr class="list-group">
          <td>2015-01-30</td>
          <td>notif</td>
        </tr>
        <tr class="list-group">
          <td>2016-03-10</td>
          <td>food</td>
        </tr>
        <tr class="list-group">
          <td>2014-09-10</td>
          <td>yop</td>
        </tr>
        <tr class="list-group">
          <td>2017-12-30</td>
          <td>wick</td>
        </tr>
      </tbody>
    </table>
  </div>

相关问题
最新问题