我想使用 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>最佳答案
您可以使用 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>关于javascript - 按日期范围从和到过滤表列表，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56879352/